使用 jQuery 动态检查和取消选中复选框：错误？答案

【问题标题】：Check and Uncheck Checkbox Dynamically with jQuery : bug?使用 jQuery 动态检查和取消选中复选框：错误？
【发布时间】：2018-03-16 21:12:25
【问题描述】：

我编写了一个脚本来控制主从复选框（自动选中和取消选中）。

这是我的 JS：

$(document).ready(function() {

    $('#myCheck').click(function() {
        $('.myCheck').attr('checked', false);
    });
    $('.myCheck').click(function() {
        if ($('.myCheck').is(':checked')) {
            $('#myCheck').attr('checked', false);
        } else {
            $('#myCheck').attr('checked', true); // IT DOESN'T WORK, WHY ?
            alert("Checkbox Master must be checked, but it's not!");
        }
    });

});

这是我的 HTML：

<input type="checkbox" id="myCheck" checked="checked" />&nbsp;&nbsp;Checkbox Master<br />
<input type="checkbox" class="myCheck" value="1" />&nbsp;&nbsp;Checkbox Slave 1<br />
<input type="checkbox" class="myCheck" value="1" />&nbsp;&nbsp;Checkbox Slave 2

看我简单的JsFiddle就可以理解问题了。

编辑 1： 就像 Inser 所说的，问题发生在 jQuery 1.9.2 及更高版本上。 jQuery 1.8.3 不再有问题。奇怪……

EDIT 2 : Inser 找到了解决方案，使用 .prop('checked', true) 代替 .attr('checked', true)强>。看看下面的cmets...

【问题讨论】：

问题是什么？
Looking at your simple JsFiddle to understand the problem 但是 myaaan！我不知道你想做什么......所以你想要什么
好的，对不起，我以为我的代码很清楚...事实上，一旦您单击 Checkbox Master，所有 Checkboxes Slave 必须取消选中：它工作正常。另一方面，一旦取消选中一个 Checkbox Slave 并且没有其他选中的 Checkbox Slave，则必须自动选中 Checkbox Master。对不起，我希望你现在能理解我的问题......
看起来是 jquery 问题。它在 1.8.3 版本中可以完美运行，但在 1.9.1 之后就不行了
该死的，你是对的 Inser！所以这是一个真正的 Jquery 错误...

标签： jquery checkbox

【解决方案1】：

对新版本的jQuery使用prop方法：

$('#myCheck').prop('checked', true);
$('#myCheck').prop('checked', false);

http://jsfiddle.net/uQfMs/37/

【讨论】：

非常感谢 Inser，这就是解决方案，您拯救了我的一天（和一夜）！做得好！ ;-)
真的很好，我对最新的 jquery 1.11 感到疯狂，谢谢！
这似乎在 jquery 版本 2+ 中不起作用......还是只是我？

【解决方案2】：

你可以试试这个。

$('#myCheck').click(function() {
    var checkBoxes = $(this).siblings('input[type=checkbox]');
    checkBoxes.prop('checked', $(this).is(':checked') ? true : false);
});

【讨论】：

三元运算符是多余的。 $(this).is(':checked') ? true : false 将始终返回与 $(this).is(':checked') 相同的布尔值。

【解决方案3】：

也许您只想选中主复选框：

$('#myCheck').click(function() {
       $('.myCheck').attr('checked', false);
       $(this).attr('checked', true);
});

看到这个fiddle。

【讨论】：

【解决方案4】：

其实我做了一些经验 $(':checkbox').attr('checked',false); 虽然这可以设置“检查”属性，但它不会继续显示在视觉中。和$(':checkbox').prop('checked', true); 这个完美的作品！希望这能有所帮助。

【讨论】：

【解决方案5】：

我为此给你写了一个插件：

$.fn.dependantCheckbox = function() {
  var $targ = $(this);
  function syncSelection(group, action) {
    $targ.each(function() {
      if ($(this).data('checkbox-group') === group) {
        $(this).prop('checked', action);
      }
    });
  };
  $('input[type="checkbox"][data-checkbox-group]').on('change', function() {
    var groupSelection = $(this).data('checkbox-group');
    var isChecked = $(this).prop('checked');
    syncSelection(groupSelection, isChecked);
  });
}
$('input[type="checkbox"][data-checkbox-group]').dependantCheckbox();


<input data-checkbox-group="1" type="checkbox" id="test" />
<label for="test">test</label>
<input data-checkbox-group="1" type="checkbox" id="test2" />
<label for="test2">test2</label>
<input data-checkbox-group="2" type="checkbox" id="test3" />
<label for="test3">test3</label>
<input data-checkbox-group="2" type="checkbox" id="test4" />
<label for="test4">test4</label>

http://codepen.io/nicholasabrams/pen/mJqyqG

【讨论】：

非常好的插件。只是想知道一个输入框是否属于多个组，那么如何根据这个插件来处理？