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

Check and Uncheck Checkbox Dynamically with jQuery : bug?

提问by Xavier C.

I made a script in order to control master & slave checkboxes (automatic checking and unchecking).

我制作了一个脚本来控制主从复选框（自动检查和取消检查）。

Here is my JS :

这是我的 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!");
        }
    });

});

And here is my HTML :

这是我的 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

Look at my simple JsFiddleto understand the problem.

查看我的简单JsFiddle以了解问题。

EDIT 1 :Like Inser said, the problem happens with jQuery 1.9.2 and over. No more problem with jQuery 1.8.3. Strange...

编辑 1：就像 Inser 所说，问题发生在 jQuery 1.9.2 及以上。jQuery 1.8.3 不再有问题。奇怪的...

EDIT 2 :Inser found the solution, use .prop('checked', true)instead .attr('checked', true). Look at the comments below...

编辑 2：插入者找到了解决方案，使用.prop('checked', true)代替.attr('checked', true)。看看下面的评论...

回答by inser

Use prop method for new versions of jQuery:

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

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

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

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

回答by Vinny Fonseca

You could try this.

你可以试试这个。

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

回答by Adams.H

i made some experiences , actually $(':checkbox').attr('checked',false);althought this could set the "checked" attribute , but it won't continuesly shows in the visual . and $(':checkbox').prop('checked', true);this one works perfectly! hope this could do some help .

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

回答by Alpha G33k

I wrote you a plugin for this:

我为此写了一个插件：

$.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

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

回答by Jan Hommes

Maybe you just want to check the master checkbox:

也许您只想检查主复选框：

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

see this fiddle.

看到这个小提琴。