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);
    }
});

点击＆＃39; #globalchecker＆＃39;复选框，＆＃39; .childcheckboxes＆＃39;不要检查/取消检查。我做错了什么？

Answer 1

这是你的代码完美无缺。

$('#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 2

＆＃13;

$('#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

});

＆＃13;

<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" />

＆＃13;

使用更改事件

Answer 3

好像你大多是正确的。这是我的版本：

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 4

在所有复选框上使用JQuery $('#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); } });。在代码检查下，如果选中所有复选框，则检查全局甚至全局。此外，如果您点击全局复选框，则也会检查所有子复选框（ 双向工作 ）：

＆＃13;

<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" />

＆＃13;

DXSETUP

＆＃13;

Answer 5

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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没有检查复选框

6 个答案: