在JQuery Mobile中动态控制多个复选框

Controlling multiple checkboxes dynamically in JQuery Mobile

本文关键字：复选框 动态控制 JQuery Mobile      更新时间：2023-09-26

我在实现一个可以多次更新一组复选框状态(使用JQueryMobile框架定义)的控件时遇到了一个问题。

非常简单的游乐场代码在这里:http://jsfiddle.net/XR44Q/3/(使用JQuery 1.9.1和JQueryMobile 1.3.0, 26行html+javascript代码)实际上，问题是简单的显示比解释。使用组控制复选框，看看组框如何在两次点击组控制后停止响应。代码和想法是如此简单，它应该只是工作:)

jsfiddle的代码在这里供将来参考:

HTML: 

<form>
  <input id="group_control" name="g" type="checkbox" />
  <label for="group_control">Group</label>
  <fieldset data-role="controlgroup" data-type="vertical" class="sub_cat">
    <input id="c01" name="c01" type="checkbox" class="cXX" />
    <label for="c01">A</label>
    <input id="c02" name="c02" type="checkbox" class="cXX" />
    <label for="c02">B</label>
    <input id="c03" name="c03" type="checkbox" class="cXX" />
    <label for="c03">C</label>
  </fieldset>
</form>
Javascript: 

$(document).ready(function () {
  $("#group_control").click(function () {
    // the checkbox state can be correctly retrieved
    alert("Group checked? "+$('#group_control').is(':checked'));
    $("INPUT[class='cXX']").attr(
        'checked', $('#group_control').is(':checked')
    ).checkboxradio("refresh");
  });
});

复选框可以在前两次更改中正确更新。因此，从未选中状态开始，控件可以将所有框转换为已选中状态，然后再将它们转换回未选中状态。但是，此时控件不能再选择任何框。

在此状态下，用户仍然可以通过单击单个复选框来控制它们。如果复选框被用户修改，则运行复选框控件在尝试选择复选框时将不起作用，并且在尝试取消选择复选框时将正确取消选择所有复选框。因此，只有当控件尝试选择之后的复选框组时，才会出现问题，修改它们两次

。

如果你检查页面dom和属性，你可以看到JQueryMobile生成的input元素在控件事件之后被正确更新，但是'data-icon'属性在应该转换为'checkbox-on'时仍然保持'checkbox-off'。用户点击复选框正确更新这个属性，所以问题实际上是理解为什么'data-icon'属性不能被jquery mobile正确管理。

感谢您的反馈!

你应该用prop代替attr:

$("#group_control").click(function() {
    //alert("Group checked? "+$('#group_control').is(':checked'));
    $("INPUT[class='cXX']").prop('checked', this.checked).checkboxradio("refresh");
});

工作演示:http://jsfiddle.net/XR44Q/4/

看一下这篇关于属性和属性之间区别的文章

开头没有"checked"属性。第一次检查时，它获得一个checked属性为true。第二次，它将已检查的属性更改为false -但它仍然有一个已检查的属性，因此在此之后它继续尝试将其更改为false。您需要根据检查的属性是否存在之外的其他内容进行评估。

相关文章：