![](/img/trans.png)
[英]If all the Child Category check-boxes are Selected Then Parent checkbox Should be selected Automatically
[英]Check/Uncheck (Select All checkbox) if all child check-boxes are selected in that div
讓我嘗試從圖片解釋一下
1.預訂,在“租車”選項卡下選中“客戶”。
現在,從“租車”選項卡中,都從php代碼中進行選擇,例如(預訂,客戶),
所以現在我想在document.ready中編寫一個代碼,以檢查SelectAll_Dynamic(全選復選框)! 因為選中了所有內部復選框(“預訂”,“客戶”),
如果未選中內部復選框(“預訂”或“客戶”)中的任何人,則應取消選中SelectAll_Dynamic(“全選”復選框)。
14是動態的! 對於每個新的div,其更改示例:1、4、6、12唯一。
<div id="tabs-14" class="tab-pane active">
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" class="SelectAll_Dynamic" id="14">
<b>Select All</b>
</label>
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
</div>
</div>
</div>
</div>
</div>
我想在頁面加載后執行一個函數,該函數應該檢查是否選中了所有復選框,除了第一個具有SelectAll_Dynamic類的復選框
如果選中所有子復選框,那么應該選擇父復選框,我該如何實現呢?
這是我檢查/取消選中所有功能
$('.SelectAll_Dynamic').click(function() {
var select_Id = this.id;
var checked = $(this).prop('checked');
$('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked);
});
$('.tab-pane').find('input:checkbox:not(:first)').click(function() {
if (!$(this).is(':checked')) {
$(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false);
} else {
var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length;
var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length;
if (checkbox_length == checked_check_box_length) {
$(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true);
}
}
});
我的預期結果是:
<input type="checkbox" class="SelectAll_Dynamic" id="14" checked> //checked
如果所有子復選框都被選中。
您需要像下面這樣:
$(document).ready(function(){ $('.tab-pane').each(function(){ var checkbox_length = $(this).find('input:checkbox:not(:first)').length; var checked_check_box_length = $(this).find('input:checkbox:not(:first):checked').length; if (checkbox_length == checked_check_box_length) { $(this).find('input:checkbox:first').prop('checked', true); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs-14" class="tab-pane active"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" class="SelectAll_Dynamic" id="14"> <b>Select All</b> </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="52" checked="">Customers</label> </div> </div> </div> </div> </div>
$(document).ready(function() { var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)"); var flag = true; $.each(allCheckboxes, function( i, val ) { if($(val).prop('checked') == false) flag = false; }); if(flag) $('.SelectAll_Dynamic').prop('checked', true); $('.SelectAll_Dynamic').click(function() { var select_Id = this.id; var checked = $(this).prop('checked'); $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked); }); $('.tab-pane').find('input:checkbox:not(:first)').click(function() { if (!$(this).is(':checked')) { $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false); } else { var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length; var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length; if (checkbox_length == checked_check_box_length) { $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true); } } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs-14" class="tab-pane active"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" class="SelectAll_Dynamic" id="14"> <b>Select All</b> </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="52" checked="">Customers</label> </div> </div> </div> </div> </div>
將以下代碼添加到$(document).ready
函數中,檢查是否選中了所有其他復選框,然后選中“全選”復選框。
var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)");
var flag = true;
$.each(allCheckboxes, function( i, val ) {
if($(val).prop('checked') == false)
flag = false;
});
if(flag)
$('.SelectAll_Dynamic').prop('checked', true);
function SelectAll_Dynamic(){ if($('.SelectAll_Dynamic').is(':checked')){ //alert('if'); $( "input" ).prop( "checked", true ); } else { //alert('else'); $( "input" ).prop( "checked", false ); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs-14" class="tab-pane active"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" class="SelectAll_Dynamic" onclick="SelectAll_Dynamic();" id="14" checked> <b>Select All</b> </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="52" checked="">Customers</label> </div> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.