Приветствую! Помогите пожалуйста решить задачу. Чекбокс с классом all_check, выбирает сразу все чекбоксы с классом checkbox. Как сделать так чтобы при клике в секции sec_one, выбирались чекбоксы только из этой секции (группы), а не все сразу на странице. Тоже самое и с другими секциями (группами).
Как вариант решения это указать новые классы для каждой секции (all_check + checkbox, all_check2 + checkbox2, all_check3 + checkbox3), но в данном случае приходится городить кучу дублирующего JS кода только с разными классами (на странице может быть до 15 блоков sec_#).
Можно ли как-то использовать один JS код. Чтобы при клике по чекбоксу all_check, он понимал что необходимо выбрать только чекбоксы из его секции (группы)?
Спасибо.
<form method="POST" action="">
<div class="sec_one">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="1"> Место для курения</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="2"> Wi-Fi</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="3"> Детское меню</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="4"> Детское меню</label>
</div>
<div class="sec_two">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="1"> something 1</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="2"> something 2</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="3"> something 3</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="4"> something 4</label>
</div>
<div class="sec_three">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="1"> something 1</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="2"> something 2</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="3"> something 3</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="4"> something 4</label>
</div>
</form>
<script>
$(function () {
var checkAll = $('input.all_check');
var checkboxes = $('input.checkbox');
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});
});
</script>
Можно искать предка и переключать в его области все боксы:
Array.from(document.querySelectorAll('.all_check')).forEach(e => e.addEventListener('change', handler)); // Назначаем слушатель
function handler(e){
// Выбираем все боксы из... дедушки и ставим их в нужное состояние
Array.from(this.parentNode.parentNode.querySelectorAll('.checkbox')).forEach(e => e.checked = this.checked);
}
<form method="POST" action="">
<div class="sec_one">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="1"> Место для курения</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="2"> Wi-Fi</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="3"> Детское меню</label>
<label><input class="checkbox" type="checkbox" name="a[]" value="4"> Детское меню</label>
</div>
<div class="sec_two">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="1"> something 1</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="2"> something 2</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="3"> something 3</label>
<label><input class="checkbox" type="checkbox" name="b[]" value="4"> something 4</label>
</div>
<div class="sec_three">
<label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="1"> something 1</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="2"> something 2</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="3"> something 3</label>
<label><input class="checkbox" type="checkbox" name="c[]" value="4"> something 4</label>
</div>
</form>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Собственно, вопросЕсли я размещу сайт на гитхаб пейджес, будет ли работать локальное хранилище, задаваемое через интерфейс Window
Необходимо из вида цены 96 000 000 рубполучить слуховой читаемый вид, то есть так: