使用 jQuery Mobile 制作水平复选框控件组

jQuery Mobile 是一个流行的移动端 UI 框架，它提供了许多易于使用的 UI 控件，其中包括复选框控件。本文将介绍如何使用 jQuery Mobile 制作水平复选框控件组。

步骤

以下是实现水平复选框控件组的步骤：

1. 加载 jQuery 和 jQuery Mobile：

   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
   <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   

2. 创建一组复选框：

   <fieldset data-role="controlgroup" data-type="horizontal">
     <legend>请选择:</legend>
     <input type="checkbox" name="option1" id="option1" checked>
     <label for="option1">选项1</label>
     <input type="checkbox" name="option2" id="option2">
     <label for="option2">选项2</label>
     <<input type="checkbox" name="option3" id="option3">
     <label for="option3">选项3</label>
   </fieldset>
   

   在上面的代码中，我们使用了 jQuery Mobile 提供的 data-role="controlgroup" 属性来告诉框架这是一个控件组，使用了 data-type="horizontal" 属性来告诉框架这是一个水平布局的控件组。

   <input> 元素代表了一个复选框，<label> 元素的 for 属性指向了 id 为 option1 的输入框，这样在用户点击标签时就可以选中相应的输入框了。

3. 控件组可选项的默认状态

   <script>
     $(document).ready(function () {
       $("input[type='checkbox']").checkboxradio("disable");
     });
   </script>
   

   在上面的代码中，我们在文档加载完成时禁用了复选框。如果我们不想控件组可选，则可以使用此代码片段。如果我们希望控件组起始时应该是选中的，则可以将复选框的 checked 属性设置为 true。

4. 控件组可选项的用户交互

   <script>
     $(document).ready(function () {
       $("input[type='checkbox']").checkboxradio().change(function () {
         console.log($(this).attr('id') + ' - ' + $(this).is(':checked'));
       });
     });
   </script>
   

   在上面的代码中，我们使用 jQuery Mobile 提供的 checkboxradio() 方法将复选框转换为 jQuery Mobile 样式的复选框控件，并在其上添加了 change 事件监听器。当用户选中或取消选中复选框时，我们将在控制台中打印选中状态。

   注意，由于我们默认禁用了复选框，因此我们可以通过以下方式启用它们：

   $("input[type='checkbox']").checkboxradio("enable");
   

5. 将控件组选中状态设置为默认值

   <script>
     $(document).ready(function () {
       $("input[type='checkbox']").prop('checked', false).checkboxradio("refresh");
     });
   </script>
   

   在上面的代码中，我们将控件组的选中状态设置为默认值，即没有选中的选项。我们使用了 prop 方法来设置复选框的 checked 属性，并使用 checkboxradio("refresh") 方法来刷新控件组的样式。

结论

通过上述步骤，我们可以创建一个水平复选框控件组，并响应用户的交互。此外，我们还可以使用其他的 jQuery Mobile 控件，如文本框、滑块等，以创建更丰富的移动应用程序。