Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.
С помощью данного кода можно:
1. Отметить любое количество чекбоксов.
2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.
3. Отметить и снять чекбоксы в один клик мыши.
Пример рабочего исходного кода и результат его работы также приведен приведен тут – http://jsfiddle.net/x404/8bhh9/
Использование:
Создать html код:
<form id="frm1">
<input type="checkbox" name="chk1" value="" />
<input type="checkbox" name="chk2" value="" />
<input type="checkbox" name="chk3" value="" />
</form>
Добавить в форму чекбокс:
<input type='checkbox' name='checkall' onclick='checkedAll(frm1);'>
Прописать javascript-код перед закрывающимся тегом /head:
<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false){
checked = true
}
else{
checked = false
}
for (var i =0; i < aa.elements.length; i++){
aa.elements[i].checked = checked;
}
}
</script>
В итоге получится (демо с данным примером в начале статьи):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>check/uncheck checbox</title>
<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false){
checked = true
}
else{
checked = false
}
for (var i =0; i < aa.elements.length; i++) {
aa.elements[i].checked = checked;
}
}
</script>
</head>
<body>
<form id="frm1">
<strong>Выбор/снятие всех чекбоксов</strong><br/><br/>
<label><input type="checkbox" name="chk1" value="" />Чекбокс 1</label>
<label><input type="checkbox" name="chk2" value="" />Чекбокс 2</label>
<br/><br/>
<label><input type="checkbox" onclick="checkedAll();" name="checkall" />Нажмите для отмены/снятия чекбоксов</label>
</form>
</body>
</html>
