Javascript, jQuery проверка checkbox на форме

Следующая статья: AJAX и передача данных без перезагрузки страницы

javascript jquery проверка checkbox на форме, html, input, checked, form, status, elements

Содержание

• HTML checkbox
• Checkbox и javascript
• Чистый javascript и проверка checkbox значения
• Код на jQuery и проверка checkbox значения
• Javascript проверка всех checkbox на html форме
• Изменяем состояние сразу всех checkbox с помощью jQuery

HTML checkbox

Хотелось бы отметить что многие изначально совершают ошибки и пишут не правильно html checkbox. То есть начитавшись в Интернет информации 10 летней давности пишут всякую охинею. Согласно одного из последних строгих DOCTYPE, который пытается нас сопроводить в эпоху HTML5 checkbox правильно пишется следующим образом:

<input type="checkbox" name="checkme" checked="checked" />

Обратите внимание, id в input объекте нет! Согласно последним стандартам к таким html объектам нужно обращаться через свойство name.

Checkbox и javascript

Особо не буду расписывать вам, на сколько это сложно или не сложно, просто тупо приведу код

Предположим есть такая html форма:

<form>
<!-- правильно пишим input согласно стандартам W3C -->
<input type="checkbox" name="checkme" checked="checked" />
</form>

Хотя если честно обворачивать в данном случае в форму не обязательно.

Чистый javascript и проверка checkbox значения

var result=document.getElementsByName('checkme').item(0).checked;

result - в данном коде javascript содержит true или false, в зависимсоит от того, в каком состоянии сейчас находится checkbox.

Код на jQuery и проверка checkbox значения

В jQuery это также не сложно. Напомню DOCTYPE strict максимально приближен к HTML5 формату, а значит ваш код будет более универсальным и переносимым в будущем.

jQuery до версии 1.4.4:
var result=$('input[name="checkme"]').attr('checked');

jQuery после версии 1.4.4:
var result=$('input[name="checkme"]').prop('checked');

Javascript проверка всех checkbox на html форме

В качестве бонуса привожу функцию, которой пользуюсь сам. смысл этой функции в том, что она выделяет все checbox на форме, убираем или меняет местами значения.

// работаем со всеми checkbox на указанной форме
function sdf_checkbox_status(_form_name,_status,_name)
// form_name - название формы
// status - присвоить статус; 0 - все отменить. 1 - всем включить; 2 - поменять местами
// name - имя checkbox`s (чекбоксов)
{ // делаем короткий объект для обращений к форме
 var f=document.getElementById(_form_name);
 var name_='';
 var str='';
 name_=(typeof(_name)=='undefined')?'del':_name;// служит для сокращения писанины на формах
 for (i=1;i<=f.length;i++)// пройтись по всем элементам на HTML форме
 { if (f.elements[i-1].type=='checkbox')// если тип элемента checkbox, то
  { str=f.elements[i-1].name;
   if (sdf_str_pos(str,name_)<1) { continue; }// если checkbox не подходящий
   switch(_status)
   { case(0): { f.elements[i-1].checked=false; break; }// сбрасываем значения
     case(1): { f.elements[i-1].checked=true; break; }// устанавливаем значения
     case(2): { f.elements[i-1].checked=!f.elements[i-1].checked; break; }// меняем местами
   }
  }
 }
 }

Вызов прост:

// обнуляет все checkbox с приставкой del_ на форме form_name
sdf_checkbox_status('form_name',0,'del_');

// включает все checkbox с приставкой del_ на форме form_name
sdf_checkbox_status('form_name',1,'del_');

// Меняет все значения checkbox с приставкой del_ на форме form_name
sdf_checkbox_status('form_name',2,'del_');

Изменяем состояние сразу всех checkbox с помощью jQuery

function sdf_checkbox_status_delete()
// Выполняет: изменение состояние checkbox с классом checkbox_delete на протиположное текущему
{
var elements=$('.checkbox_delete');// выбрать все элементы с классом checkbox_delete
var len=elements.size();// узнаем сколько элементов присутствует на странице
for (index=0;index<len;index++)// пройтись по всем элементам [checkbox]
{ // поменять состояние checkbox на противоположное
  elements.eq(index).prop('checked',!elements.eq(index).prop('checked'));
}
}