爲什麼複選框沒有被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的

回答

相關問題