为什么 jquery 没有选中复选框

Question

这里是 html:

<input id="globalchecker" type="checkbox"/>

<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />

这里是 jquery:

$('#globalchecker').on('click', function () {
    if($('#globalchecker').is(":checked")){
        $('.childcheckboxes:checkbox').prop('checked',true);
    }
    else{
        $('.childcheckboxes:checkbox').prop('checked', false);
    }
});

单击“#globalchecker”复选框时，“.childcheckboxes”不会得到 checked/un-checked。我做错了什么？

Answer 1

$('#globalchecker').on('change', function() { //use change

  $('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked")); //use the state of #globalchecker as parameter for checked or not to make it 1 liner

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />

<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />

使用更改事件

Answer 2

看来你大部分是对的。这是我的版本：

var $globalChecker = $('#globalchecker');

var $children = $('.child');

 $globalChecker.on('click', function() {
  if ( $(this).is(":checked") ) {
    $children.prop('checked',true);
  } else {
    $children.prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class='item-list'>

  <li class='item'>
    <label class='input-w'> <!-- probably put them all in labels like this -->
      <span class='label'>global?</span>
      <input type="checkbox" id="globalchecker" />
    </label>
  </li>
  <li class='item'>
    <input type="checkbox" class='child'/>
  </li>
  <li class='item'>
    <input type="checkbox" class='child'/>
  </li>
  <li class='item'>
    <input type="checkbox" class='child'/>
  </li>
  <li class='item'>
    <input type="checkbox" class='child'/>
  </li>

</ul>

Answer 3

这是您的代码，可以完美运行。

$('#globalchecker').on('click', function () {
    if($('#globalchecker').is(":checked")){
        $('.childcheckboxes:checkbox').prop('checked',true);
    }
    else{
        $('.childcheckboxes:checkbox').prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/>

<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />

Answer 4

在所有复选框上使用 JQuery change。下面的代码检查，如果所有的复选框都被选中，那么即使是全局的也会被选中。此外，如果您单击全局复选框，那么所有子复选框也会被选中（双向工作）：

$('#globalchecker').on('change', function() {
  $('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked"));
});

$('.childcheckboxes').on('change', function() {
  if ($('.childcheckboxes').length == $('.childcheckboxes:checked').length) {
    $('#globalchecker').prop('checked', true);
  } else {
    $('#globalchecker').prop('checked', false);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />

Answer 5

$('#globalchecker').on('click', function () {
    if($('#globalchecker').is(":checked")){
        $('.childcheckboxes:checkbox').prop('checked',true);
    }
    else{
        $('.childcheckboxes:checkbox').prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/> Global Checkbox

<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />

Answer 6

你的代码对我来说工作正常，这是我的解决方案。
您可以使用全局复选框的当前状态，而不是使用 if else。

$('#globalchecker').on('click', function() {
  var isGlobalChecked = $('#globalchecker').is(":checked");
  $('.childcheckboxes:checkbox').prop("checked", isGlobalChecked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
global<input id="globalchecker" type="checkbox" />
<br/>
<br/> one
<input type="checkbox" class="childcheckboxes" /> two
<input type="checkbox" class="childcheckboxes" /> three
<input type="checkbox" class="childcheckboxes" /> four
<input type="checkbox" class="childcheckboxes" />

为什么 jquery 没有选中复选框

Why are the checkboxes not being checked by jquery

javascript

jquery

checkbox

prop