为什么复选框没有被jQuery的

这里检查是HTML：为什么复选框没有被jQuery的

<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时

'不检查/不检查。我究竟做错了什么？

来源

2017-06-22 Dave2345

你的代码工作fine.Here是小提琴：https://jsfiddle.net/aaenbect/ –

你应该使用'change'事件，而不是'click'事件 –

你的代码为我完美工作!!!!!! –

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

使用更改事件

来源

2017-06-22 06:34:44 guradio

这是有道理的，因为它是一个复选框，其不被“点击”，但改变它指出...让我试试。 – Dave2345

好的，也没有工作。 – Dave2345

什么没有工作？你可以分享所有的HTML？你有多个'globalchecker' ID吗？ – guradio

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

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>

来源

2017-06-22 06:42:05 sheriffderek

这里是你的代码，这个完美的作品。

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

来源

2017-06-22 06:42:34

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

来源

2017-06-22 06:42:55

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

来源

2017-06-22 06:48:06

您的代码工作对我来说很好，这里是我的解决方案。
而不是使用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" />

来源

2017-06-22 06:53:05

为什么复选框没有被jQuery的

回答

相关问题