jquery-mobile - 如何使用 jquery mobile 在复选框标签旁边添加一个文本框？

Question

如何使用 jquery mobile 在复选框标签旁边添加一个文本框？它应该在一行中（复选框->标签（用于复选框）->文本框）

Answer 1

如果要在与其引用元素相同的行中添加标签，例如：

我的图例 [ ] 复选框标签

您可能想尝试使用字段容器，带有data-role="fieldcontain".

例如：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Agree to the terms:</legend>
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
        <label for="checkbox-2">I agree</label>
    </fieldset>
</div>

上面的代码将为您提供：

同意条款：[] 我同意

查看在线文档以获取更多信息：http: //jquerymobile.com/demos/1.1.1/docs/forms/checkboxes/

---

现在，如果您想在一行中添加多个元素（= 不同列中的多个元素），我的意思不仅仅是一个标签及其元素，您可能想查看 jQuery Mobile 的：http Layout grids: //jquerymobile.com/demos/1.1 .1/docs/content/content-grids.html

---

考虑到您的示例案例，我认为您可能想尝试结合使用上述两种方法。所以，你可以尝试这样的事情：

<div class="ui-grid-a">

    <!-- FIRST COLUMN -->
    <div class="ui-block-a">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Agree to the terms:</legend>
                <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                <label for="checkbox-2">I agree</label>
            </fieldset>
        </div>
    </div>

    <!-- SECOND COLUMN -->
    <div class="ui-block-b">
        <input type="text"/>
    </div>

</div>

希望这可以帮助。