check/uncheck checbox

Snip Code

Как отметить все `чекбоксы` (checkbox) в форме одной кнопкой `Отметить все`?

Иногда в форме бывает много `чекбоксов` и для удобства пользователей можно сделать 2 кнопки: Отметить все и Снять отметки со всех.

Ниже код на jQuery, который с легкостью справляется с этой задачей, плюс дает влзможность не отмечать checkbox у которого стоит флаг disabled, то есть чекбокс не активен.

Решение

Отметим все «чекбоксы», включая неактивые

Отметить все    
Снять все отметки

Отметить все    
Снять все отметки

Код простой, если вдруг что-то не понятно, спрашивайте!

Демо работы функции

Отметим все «чекбоксы», включая неактивые

Отметим все «чекбоксы», неактивые не отмечаем.

Источник

Как выбрать или убрать все флажки в чекбоксах с помощью JavaScript

В этом руководстве мы расскажем, как ставить и снимать флажки в input type checkbox с помощью JavaScript . Пользователь сможет одним кликом включить или выключить все элементы списка, что значительно сэкономит его время.

Посмотреть результат

Чтобы установить или убрать все флажки в чекбоксах, нужно:

Шаг 1 . Создайте HTML файл , сделайте его разметку, примените стили и напишите код JavaScript .

Мы создали файл HTML и сохранили его как checkbox.html :

    body < width:100%; margin:0 auto; padding:0px; background-color:#424242; font-family:helvetica; >#wrapper < text-align:center; margin:0 auto; padding:0px; width:100%; >h1 < margin-top:50px; color:#D8D8D8; >h1 p < font-size:14px; color:white; >input[type="button"] < background:none; color:white; border:1px solid white; width:100px; height:50px; border-radius:50px; margin:10px; font-weight:bold; >input[type="checkbox"] < width:20px; height:20px; >td  
  
 
 
PHP
 
 
 
HTML
 
 
 
JavaScript
 
 
 
jQuery
 
 
 
CSS
 
 
 
MySQL
 
 
 
  

Мы написали разметку для input type checkbox JavaScript , и создали две кнопки: одна для того, чтобы выбрать все элементы списка, другая – чтобы отменить выбор всех элементов списка. Две функции – check() и uncheck() ставят или убирают галочки всех чекбоксов. Функция check() проверяет, является ли элемент чекбоксом. Если да, она ставит в нем галочку. Функция uncheck() работает точно так же, как и check() , только снимает галочки со всех чекбоксов.

Вот и все, выбирать или снимать все флажки в input type checkbox при помощи JavaScript просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.

Источник

Работа с checkbox в JQuery

Имитация клика по чекбоксу с запуском повешенных на него событий.

Узнать количество отмеченных

var count = $(':checkbox:checked').length;

Обход CheckBox’ов

Выбор всех отмеченных

$('input:checkbox:checked').each(function()< alert($(this).val()); >);

Получить из всех отмеченных массив значений атрибута value

var checked = []; $('input:checkbox:checked').each(function() < checked.push($(this).val()); >);

Обход неотмеченных чекбоксов

$('input:checkbox:not(:checked)').each(function()< alert($(this).val()); >);

Показать или скрыть блок контента по клику на checkbox

Какой-то текст.

Продолжить регистрацию  

 checkbox 1  checkbox 2  checkbox 3  

checkbox 1 checkbox 2 checkbox 3
  

checkbox 1 checkbox 2 checkbox 3 
  

var el = document.getElementById("checkbox_spage");
el.onclick = function () if (el.checked) alert("checkbox_spage 1"); 
> else alert("checkbox_spage 0"); 
>;
>; 

        
Выбор/снятие всех чекбоксов
 
Чекбокс 1 Чекбокс 2 
 
Нажмите для отмены/снятия чекбоксов