はなぜチェックボックスがここに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 'チェックされない/チェックされない。私は間違って何をしていますか？あなたがほとんど正しいよう

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

1. 使用変更イベント

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