javascript — Установите / снимите флажок (выбрать все флажки), если все дочерние флажки установлены в этом div
позвольте мне попытаться объяснить из изображения,
1. Бронирование, Клиенты проверяются на вкладке Аренда автомобилей.
-
Теперь из вкладки «Аренда транспортных средств» оба выбираются из кода php, т. Е. (Бронирование, клиенты),
-
Так что теперь я хочу написать код в document.ready чтобы проверить флажок SelectAll_Dynamic (Выбрать все) ,! потому что все внутренние флажки (Бронирование, Клиенты) проверены,
-
если кто-либо из внутренних флажков (Reservation или Customers) не отмечен, то SelectAll_Dynamic (Select All checkbox) должен быть снят.
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 Функция whick проверяет, установлены ли все остальные флажки, затем установите флажок Выбрать все.
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>detector