Добрый день!
Есть форма с несколькими дивами, внутри каждого дива есть свой список чекбоксов. Также у каждого дива есть две кнопки : "Выбрать всё" и "Сбросить всё".
Необходимо сделать так, чтобы при нажатии кнопки "Выбрать всё" у каждого из дивов, только чекбоксы ЭТОГО дива! выделились как отмеченные, а чекбоксы другх дивов оставались пустыми. И, соответственно, выбрая "Сбросить всё", сбрасывались только те чекбоксы, которые находятся внутри данного дива.
Делаю таким образом, как представлено в коде (см ниже), но при нажатии на кнопку "Выбрать всё" первого дива, выбираются также чекбоксы и остальных дивов (+ сбрасывается таким же образом).
Предполагаю, что необходимо использовать this, но пока не получается его правильно применить в контексте данной задачи.
Заранее большое спасибо за помощь!
Вот мой код:
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<title>Тестовая проверка</title>
<script>
$(document).ready(function() {
$("#check_all").click(function () {
$('input[type=checkbox]').each(function() {
this.checked = true;
});
});
});
$(document).ready(function() {
$("#unchecked_all").click(function () {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});
});
</script>
<style>
.main {
color: darkblue;
font-weight: bold;
}
.main2 {
color: limegreen;
font-weight: bold;
}
</style>
</head>
<body>
<form method="POST" >
<div id = "block1">
<p><button type="button" id="check_all" ><span class= "main"> Выделить всё </span></button>
<button type="button" id="unchecked_all"><span class= "main2"> Снять всё </span></button>
</p>
<label><input type="checkbox" name="checks" class="checkbox" value="1"> Чекбокс 1</label> <br>
<label><input type="checkbox" name="checks" class="checkbox" value="2"> Чекбокс 2</label> <br>
<label><input type="checkbox" name="checks" class="checkbox" value="3"> Чекбокс 3</label> <br>
</div>
<div id = "block2">
<p><button type="button" id="check_all" ><span class= "main"> Выделить всё </span></button>
<button type="button" id="unchecked_all"><span class= "main2"> Снять всё </span></button>
</p>
<label><input type="checkbox" name="checks" class="checkbox" value="4"> Чекбокс 4</label> <br>
<label><input type="checkbox" name="checks" class="checkbox" value="5"> Чекбокс 5</label> <br>
<label><input type="checkbox" name="checks" class="checkbox" value="6"> Чекбокс 6</label> <br>
</div>
</form>
</body>
</html>
