Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом 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>
comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)