JQuery的檢查並取消選中複選框驗證

Question

我有一些複選框，其中一個是全選和其他兒童的複選框是否有

這是我的HTML

<label> Select All </label> 
<input type="checkbox" name="all" checked="" id="parent"> 
<label> Child 1 </label> 
<input type="checkbox" name="child" checked="" id="child"> 
<label> Child 2 </label> 
<input type="checkbox" name="child" checked="" id="child"> 

這是檢查和取消選中

我的jQuery腳本

$('#parent').on('change', function() { 
    $('.child').prop('checked', $(this).prop('checked'));   
}); 
$('.child').on('change', function() { 
$('#parent').prop('checked', false); 
$('.child').not(this).prop('checked', false); 
$(this).prop('checked',true); 
}); 

的選擇一切工作正常，但（「.child」）上的變化父是取消勾選及子女繼續檢查，我不能取消

我需要爲一旦任何兒童被檢查的家長應與所有其他的子元素一起被取消選中的方式，但我也應該能夠選擇多個孩子

Answer 1

可以使用click而不是change。還要將id="child"更改爲class="child"。

HTML：

<label> Select All </label> 
<input type="checkbox" name="all" checked="" id="parent"> 
<label> Child 1 </label> 
<input type="checkbox" name="child" checked="" class="child"> 
<label> Child 2 </label> 
<input type="checkbox" name="child" checked="" class="child"> 

JS：

$('#parent').on('click', function() { 
    $('.child').prop('checked', $(this).prop('checked'));   
}); 
$('.child').on('click', function() { 
    console.log($('.child').is(':checked').length); 

    if ($('.child:checked').length == 2) { 
     $('#parent').prop('checked', true); 
    } else { 
     $('#parent').prop('checked', false); 
    } 

}); 

$('#parent').on('click', function() { 
 
    $('.child').prop('checked', $(this).prop('checked'));   
 
}); 
 
$('.child').on('click', function() { 
 
\t 
 
\t if ($('.child:checked').length == 2) { 
 
\t \t $('#parent').prop('checked', true); 
 
\t } else { 
 
\t \t $('#parent').prop('checked', false); 
 
\t } 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> Select All </label> 
 
<input type="checkbox" name="all" checked="" id="parent"> 
 
<label> Child 1 </label> 
 
<input type="checkbox" name="child" checked="" class="child"> 
 
<label> Child 2 </label> 
 
<input type="checkbox" name="child" checked="" class="child">

Answer 2

我認爲，當你去選擇孩子複選框再次，第一個函數正在刪除，並使父項被選中。所以你可以試試這個：

$('#parent').on('change', function() { 
    if($(this).is(":checked")){ 
     $('.child').prop('checked', $(this).prop('checked')); 
    }else{ 
     $(this).prop('checked', false); 
    } 
});