Jquery input type checkbox

Jquery input type checkbox

Выборка всех элементов, который были отмечены или выбраны.

version added: 1.0 jQuery(

Селектор :checked работает с чекбоксами, радио кнопками, элементами селект (select). Для элементов select лучше использовать селектор :selected.

Примеры

Пример: Определяем сколько элементов выделено.

Демо:

Пример: Определить отметку радио кнопи.

Reading the status of the checkbox

We will come to know the status of the checkbox checked or not. If it is checked then prop function will return true if not then we will get false. We will display the result in an alert window.

Using prop The above code will display one alert window at the time of page loading. Subsequently it will not show if we click or check the checkbox, this is because it is not connected to any change event.

Connecting checkbox to on Change event.

Changing status to check or uncheck

Using custom data attributes for checkbox

If there are several checkboxes on page with different class, id, value and name, we can get details of clicked checkbox by using HTML5 data attributes. In this example we have used additional custom attribute ( allowed in HTML5 , name should start with string ‘data-‘ )

HTML5 data-*
In addition to standard attributes we used additional data attributes as per the format given in HTML5. How to collect the data attributes

Enable or disable a checkbox

Reading checkbox id and value

Reading checkbox id , value and status

We will modify the above script and add the status of the checkbox to it. Instead of showing an alert we will display one message box for few seconds to display the clicked checkbox id, value and status. Note that status can be true or false

Атрибут checked="checked"

Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.

Атрибут checked="checked" можно вызывать с помощью label

Если нажать на содержимое label, то сработает input (будет активным или нет).

описание описание1 описание2

input не обязательно должен располагаться внутри label.

описание описание1 описание2

Атрибут checked="checked" можно вызывать с помощью нескольких label

Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.

описание2 описание1 описание11 описание21 описание12 описание22

Псевдокласс :checked

С помощью CSS можно прописать что будет происходить с другими нижестоящими элементами, когда кнопка нажата. Когда кнопка отжата, элементы будут возвращаться к исходному состоянию. Чтобы всё без проволочек было, нужно хорошо разбираться в селекторах.

Вот несколько вещей, которые можно сделать только на CSS

  1. Tab-меню
  2. Слайдеры, галереи: 1, 2, 3
  3. Accordion
  4. Модальное окно
  5. Спойлер
  6. Пока флажок не установлен, по ссылке пройти нельзя:

Я ознакомлен и принимаю условия договора
ссылка, ну-ка, нажмите на меня

:checked и селекторы в Google Chrome

Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox

Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.

Проверка чекбокса на включение/отключение

Большинство вещей не решить только CSS. Нужно подключать JavaScript. Иногда нужно так Если группа Или так Или так . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения.

Проверить все ли чекбоксы помечены

Установить checked в checkbox

Установить checked в radio

Выделить все checkbox одним нажатием кнопки

Задача:

  1. если отметить все checkbox, то будет отмечен и главный,
  2. если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
  3. если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Читайте также:  Решение задачи с тремя неизвестными

Решение я нашла тут. Check all

Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега

Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.

Первая форма: Вторая форма:

Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.

Дерево из checkbox

Задача:

  1. если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
  2. если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
  3. родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
  4. семантический код,
  5. у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.

Что не удалось:

  1. если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.

Как сделать полноценное дерево из checkbox

Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.

  1. плюсик и минус работают только если ни один из потомков не выделен,
  2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
  3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
  4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
  5. доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

Деактивировать все флажки, кроме нескольких отмеченных

Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.

Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll(‘[type="checkbox"]:not([checked])’) работает только для изначально установленных флажков.

Как посчитать сумму значений value у выбранных чекбоксов

80 комментариев:

Rusylev как всегда на высоте! Великолепная статья, спасибо. NMitra Спасибо )) Анонимный Спасибо) Анонимный Потрясающе!Отлично все сделано) все четко, и доступно!Спасибо. NMitra Благодарю, приятно слышать ) Анонимный Круто ,всё круто с: ,спасибо Misha B классно, спасибо, очень познавательно
а как сделать так что бы только при отмечании галочкой была возможность перейти на следующую старницу.
пример лицензионное соглашение — только при отмечании была возможность перейти на определённый URL , в если не было отмеченно и попытаться перейти по URL то выскакивало окно как в "Проверка чекбокса на включение/отключение"
зарание спасибо NMitra Хм, это и на CSS можно сделать. Ребёнок заболел. Наверно в понедельник/вторник выложу свой вариант, обновлю эту статью.. Misha B Желаю здоровья вашему ребёнку и вам. не проблема подождём, лижбы у вас было всё в порядке NMitra Спасибо, пошли на поправку, см. http://shpargalkablog.ru/2013/08/checked.html#linkDa Штиф Васлер Вот это статья, просто perfect! Благодарю за очередной урок css магии 😉 Анонимный Здравствуйте. Очень хорошая статья. Есть ли что-то подобное не только про checkbox, но и про radio. Если быть точнее, то возникла проблема — есть таблица, в которой имеется 4 столбца и какое-то бесконечное количество строк. В каждой строке по 4 инпута с типом radio, т.е. пользователь для каждой строки может выбрать только один вариант. Но вот как сделать, чтобы в каждом столбце был как бы общий radio, который выделяет сразу все radio именно в его столбце и при этом сам выделяется. В общем я всё это реализовал, вот только общий radio сам остаётся не выделенным. Осталось совсем маленько, не знаю как добить уже. Помогите, пожалуйста. NMitra Здравствуйте, по мне, так не очень удачная идея. В группе radio хоть один элемент да должен быть активным:

Читайте также:  Сбрасывается звонок на телефоне через секунду айфон

Анонимный Спасибо Анонимный Админ большое спасибо! Очень помогло. NMitra На здоровье! Анонимный Спасибо большое, статья очень помогла Николай Зуев круто слов нет. только вот почему не написано как работать с пхп? NMitra Потому что с PHP я знакома постольку-поскольку. Анонимный Wow/ Автор-молодецц-такая работа- нашел что искал- группа чекбоксов с одной кнопкой. Спасибо Анонимный добрый день помогите решить задачу
нужно сделать окно над которым будут радио баттоны нажимая на которые, один текст сменяется другим в зависимости от нажатого радио баттона. радио баттоны подписаны 1,2,3.
!но при этом нажимая на радиобаттоны менялась и картинка в хедере!
https://yadi.sk/i/-DjMU_yQWPzhN NMitra Добрый день. Я бы делала JavaScript-ом. Не совсем понимаю как вам помочь. Это нужно знать как минимум ваши селекторы. И такая работа, как правило, оплачивается. Извините. Анонимный как заставить чекбоксы работать в гугл хром? NMitra У меня в браузере все примеры выше работают. У вас не так? Анонимный а есть ли возможность по нажатии на чекбокс сдлеть редактируемыми/(не редактируемыми) текстовые поля, находящиеся на этой же странице? NMitra Легко, только input-ы должны иметь одного родителя

Соколов Игорь профессионально, доступно, большая благодарность NMitra Спасибо за комментарий, Игорь! Анонимный Спасибо! А вот еще простое дерево на CSS
http://jsfiddle.net/NZaw4/1/ NMitra Благодарю за пример, он будет полезен читателям! Посмотрите и тег details (html5) http://jsfiddle.net/NMitra/gfuon23b/2/ ( http://shpargalkablog.ru/2013/04/details-html.html ) для Хрома Анонимный Провел всю ночь в шпаргалке блоггера, так и не удалось добиться результата на основе примеров, которые вы привели.
Я буду очень благодарен, если подскажете:

Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?

С таблицей целиком получается, а отдельно с TD ячейкой не хочет работать. NMitra Здравствуйте. Проблема или с селекторами или с перебором http://shpargalkablog.ru/2013/10/for-javascript.html

var c = document.querySelectorAll(‘input’);
for (var i = 0; i Максим Бойко Работает. Сложность осталась в следующем. На странице имеется целый список из таких строк. В каждой строке присутствует минимум 2 radio элемента. Этот скрипт, понятное дело, меняет цвет во всех td ячейках. Требуется чтобы каждая строка по отдельности меняла цвет. Прошу помощи. У меня есть нынешний скрипт, который работает, но меняет строку tr целиком.

—>

jQuery(document).ready(function() <
jQuery("input[value=’нет’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#fff");
>)
jQuery("input[value=’обычные’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#acacf9");
>)
jQuery("input[value=’опасные’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#ff9494");
>)
>);

За ранее благодарен за помощь. NMitra Так? http://jsfiddle.net/NMitra/veh95qdf/1/

червертая пятая
третья червертая пятая

FOMUVI Здравствуйте. Можно ли добиться для кнопки radio эффект "Я ознакомлен и принимаю условия договора"?
Вот моя таблица: http://i.imgur.com/gfxTqiG.jpg
Форма методом POST отправляет данные с множество столбцов. Хочу, чтобы кнопка "оценить" не была доступна, пока хотя бы один пункт не выбран. Поигрался с примером, ничего не вышло, может есть секрет какой? Буду рад совету, спасибо. NMitra Здравствуйте, тут пока не запустили родительский селектор только JS. Если на радио-input хоть раз нажать, то потом его снять нельзя: http://jsfiddle.net/NMitra/tuq71ym7/

Читайте также:  Какие это файлы pas

var c = document.querySelectorAll(‘table input’);
for (var i = 0; i FOMUVI Что-то не получается. Я с Java не знаком вообще. Чтобы заработало, нужно обязательно в HEAD поместить скрипт (нет возможности)? И у меня кнопка "оценить" это submit, потому нужно так написать document.querySelector(‘input[type="submit"]’).disabled = false; ? Кстати, у таблицы есть класс CSS, это не мешает? NMitra Скрипт добавляйте в конец страницы, поближе к футеру, а лучше за него. Вернее сначала HTML, а затем тег Анонимный Супер, спасибо огромное все работает) Анонимный Очень ёмко! А вот вопрос на засыпку:
По нажатию на кнопку меню открывается форма входа, в виде выпадающего списка. в ней есть один чекбокс, и когда на него нажимаешь форма сворачивается. Как это предотвратить? NMitra Нужен код. Анонимный извините за беспокойство, но уже разобралась.
ох уж эти красивые переключатели залипонные!) правда вписать их в дизайн сайта, наверное, довольно сложно. а знаете хоть один пример такой? NMitra Элементы формы так нагляднее получаются http://www.lukew.com/ff/entry.asp?1950 Анонимный Добрый день. Подскажите пожалуйста, что надо добавить что бы сворачивать ветви не зависимо от того что выделено в дереве с чекбоксами, и второй вопрос, как можно свернуть js дерево по событию?
Большое спасибо. NMitra Добрый день,на ваш вопрос не ответить мимоходом, а выделить время я смогу лишь на следующей недели. Если вас устроит, отпишитесь в комментариях. Анонимный Да, конечно устроит. Буду ждать. Большое спасибо. NMitra Независимая работа

var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll(‘fieldset’), function(eFieldset) <
var main = [].filter.call(t.querySelectorAll(‘[type="checkbox"]’), function(element) );
main.forEach(function(eMain) <
var l = [].filter.call(eFieldset.querySelectorAll(‘legend’), function(e)
);
l.forEach(function(eL) <
var all = eFieldset.querySelectorAll(‘[type="checkbox"]’);
eL.onclick = function()
eFieldset.onchange = function() <
var allChecked = eFieldset.querySelectorAll(‘[type="checkbox"]:checked’).length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked NMitra По второму пункту

document.querySelector(‘#svernut’).onclick = function() <
var all = t.querySelectorAll(‘fieldset’);
for(var i=0; i all[i].className = »;
>
>

Весь пример http://jsfiddle.net/NMitra/uewct60o/ Анонимный Здравствуйте. Спасибо. Вы очень помогли, все получилось. Анонимный Здравствуйте, помогите пожалуйста.
Кнопка №6 — for="payt6"

Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст.
Это что-то связанное с концом кода, я прав?
Заранее спасибо NMitra Здравствуйте,

#payt6:not(:checked) + .switch + div <
display: none;
> Анонимный это все не работает, если чекбокс и элемент на который он воздействует находятся не рядом, а например даже через какой-то див, поэтому все это не особо полезно NMitra Что именно делаете. Свой пример на http://jsfiddle.net/ разместите. Там селектор только поправить нужно. Анонимный Был бы признателен, если бы подсказали, как сделать через ксс что бы при отметке чекбокса, кнопка становилась активной?

Вот мой вариант —

Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
описание 1
описание 2

#vvv <
display: none;
>
#vosem:checked

#eee <
display: none;
>
#vosem:checked

#vvv <
display: inline-block;
>

он работает только если инпут и кнопки расположены рядом, а как сделать что бы работало вне зависимости от положения друг относительно другу? NMitra См. http://jsfiddle.net/NMitra/jh1vtnhr/
Родительский селектор есть, но он ещё пока не поддерживается браузерами. Тогда бы совсем просто было. Анонимный Если местами переставить инпут и кнопки, то уже не работает ((( NMitra Без родительского селектора такое на CSS сделать затруднительно, зато на JS без проблем http://jsfiddle.net/NMitra/jh1vtnhr/1/ Анонимный Супер статья ))) побольше бы таких ) Dmytro Iatskyi Спасибо за статью!

Подскажите, пожалуйста, как сделать, в случае дерева чекбоксов, чтобы они не только отмечались в зависимости от отметки родительского, а и выполняли функции, подвязанные на них? В моём случае — это показ/скрытие Overlay на карте Google.

Спасибо! NMitra Внутри функции напишите свою функцию, например, здесь

Ссылка на основную публикацию
Bootstrap glyphicons не отображаются
I haven't had much issue picking up bootstrap so far, however tonight I tried integrating glyphicons inside a navbar element...
Adblock detector