Как сделать неактивным кнопку в jquery

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

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

<input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox"/> <input type="radio" checked name="raz"/> <input type="radio" name="raz"/> <input type="radio" name="raz"/>

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

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

описание

<label><input type="checkbox"/> описание</label> описание1 описание2 <label><input type="radio" checked name="dva"/> описание1</label> <label><input type="radio" name="dva"/> описание2</label>

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

описание

<input type="checkbox" id="raz"/><label for="raz">описание</label> описание1 описание2 <input type="radio" checked name="dva" id="dva1"/><label for="dva1">описание1</label> <input type="radio" name="dva" id="dva2"/><label for="dva2">описание2</label>

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

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

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

<label for="tri">описание2</label><input type="checkbox" id="tri"/><label for="tri">описание1</label> описание11 описание21 описание12 описание22 <input type="radio" checked="checked" name="tri" id="tri1"/><input type="radio" name="tri" id="tri2"/> <label for="tri1">описание11</label> <label for="tri2">описание21</label> <label for="tri1">описание12</label> <label for="tri2">описание22</label>

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

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

<style> .Green { background: green; width: 130px; height: 130px; transition: .5s; } #chetyre:checked .Green { background: yellow; } </style> <input type="checkbox" id="chetyre"/> <div class="Green"></div> <style> .Green1 { background: green; width: 130px; height: 130px; transition: .5s; } #chetyre2:checked .Green1 { background: yellow; } #chetyre3:checked .Green1 { background: red; } </style> <input type="radio" checked="checked" name="chetyre"/> <input type="radio" name="chetyre" id="chetyre2"/> <input type="radio" name="chetyre" id="chetyre3"/> <div class="Green1"></div>

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

  1. Tab-меню
  2. Слайдеры, галереи: 1, 2, 3
  3. Accordion
  4. Модальное окно
  5. Спойлер
  6. Пока флажок не установлен, по ссылке пройти нельзя:
Я ознакомлен и принимаю условия договора
ссылка, ну-ка, нажмите на меня <style> #link { position: relative; } #link a { pointer-events: none; } #link:hover:before { display: block; content: "Подтвердите своё согласие с условиями договора"; position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 10px)); border-radius: 3px; padding: 10px; background: #f7f7f7; box-shadow: 0 0 2px; } #link:hover:after { display: block; content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px; border-color: #f7f7f7 transparent transparent transparent; } #linkDa:checked #link a { pointer-events: auto; } #linkDa:checked #link:after, #linkDa:checked #link:before { content: none; } </style> <input type="checkbox" id="linkDa"/><label for="linkDa">Я ознакомлен и принимаю условия договора</label><br> <span id="link"><a href="#">ссылка</a></span>

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

Не работает

<style> #vosem:checked + label button { color: red; } </style> <input type="checkbox" id="vosem"/><label for="vosem"><button>описание</button></label>

Работает

<style> #sem + label { position: relative; z-index: 1; } #sem + label button { position: relative; z-index: -1; } #sem:checked + label button { color: green; } </style> <input type="checkbox" id="sem"/><label for="sem"><button>описание</button></label>

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

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

<style> #payt {display: none;} [for="payt"] { position: relative; display: inline-block; width: 120px; height: 40px; border-radius: 50px; background: rgb(71, 71, 71) linear-gradient(rgb(17, 17, 17), rgb(17, 17, 17), rgba(255, 255, 255,.2)) no-repeat 50% 50%; background-size: 80px 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2); cursor: pointer; } [for="payt"]:before { content: ""; position: absolute; left: 10px; top: 10px; display: block; width: 20px; height: 20px; border-radius: 100%; background: #ccc linear-gradient(#fcfff4, #dfe5d7 40%, #b3bead); transition: .5s; } #payt:checked [for="payt"]:before { left: 90px; } </style> <input type="checkbox" id="payt"/><label for="payt"></label>
<style> #payt1 {display: none;} [for="payt1"] { position: relative; display: inline-block; width: 40px; height: 10px; border-radius: 3px; background: rgb(71, 71, 71); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2); cursor: pointer; } [for="payt1"]:before { content: ""; position: absolute; left: -8px; top: -3px; display: block; width: 16px; height: 16px; background: #dfe5d7 radial-gradient(#dfe5d7, #b3bead 80%, #fff 80%) no-repeat 50% 50%; transition: .5s; } #payt1:checked [for="payt1"]:before { left: 32px; } </style> <input type="checkbox" id="payt1"/><label for="payt1"></label>
ON <style> #payt2 {display: none;} [for="payt2"] { position: relative; display: block; width: 90px; height: 10px; padding: 15px; border-radius: 50px; line-height: 10px; color: #31b3ff; text-shadow: 1px 1px 0px rgba(255,255,255,.15); background: rgb(71, 71, 71); box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 5px rgb(60, 60, 60), inset 0 6px 6px rgba(0,0,0,.5), inset 0 -6px 1px rgba(255,255,255,.2); cursor: pointer; } [for="payt2"]:before { content: "OFF"; position: absolute; right: 15px; color: #000; } [for="payt2"]:after { content: ""; position: absolute; left: 5px; top: 5px; display: block; width: 50px; height: 30px; border-radius: 50px; background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%); transition: .5s; } #payt2:checked [for="payt2"]:after { left: 65px; } </style> <input type="checkbox" id="payt2"/><label for="payt2">ON</label>
<style> #payt3 {display: none;} [for="payt3"] { position: relative; display: block; width: 100px; height: 100px; border-radius: 100%; background: #ddd linear-gradient(#ccc, #fff); box-shadow: inset 0 2px 1px rgba(0,0,0,.15), 0 2px 5px rgba(200,200,200,.1); cursor: pointer; } [for="payt3"]:after { content: ""; position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; border-radius: 100%; background: #969696 radial-gradient(40% 35%, #ccc, #969696 60%); box-shadow: inset 0 2px 4px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 white; } [for="payt3"]:before { content: ""; position: absolute; top: 8%; right: 8%; bottom: 8%; left: 8%; border-radius: 100%; background: #eaeaea; box-shadow: 0 3px 5px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -5px 5px rgba(100,100,100,.1), inset 0 5px 5px rgba(255,255,255,.3); } #payt3:checked [for="payt3"]:before { background: #e5e5e5 linear-gradient(#dedede, #fdfdfd); } #payt3:checked [for="payt3"]:after { background: #25d025 radial-gradient(40% 35%, #5aef5a, #25d025 60%); box-shadow: inset 0 3px 5px 1px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.4), 0 0 10px 2px rgba(0, 210, 0, .5); } </style> <input type="checkbox" id="payt3"/><label for="payt3"></label>
<style> #payt4 {display: none;} [for="payt4"] { display: inline-block; padding: 7px; border-radius: 100px; background: rgba(0, 0, 0, .1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4) inset, 0 1px 1px 0 rgba(255, 255, 255, .1); text-shadow: 0 1px rgba(0, 0, 0, .5); cursor: pointer; } [for="payt4"]:before, [for="payt4"]:after { display: inline-block; padding: 5px 20px; } [for="payt4"]:before { content: "ВЫКЛ"; border-radius: 100px 0 0 100px; background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0)); color: rgba(0,0,0,.4); box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4); } [for="payt4"]:after { content: "ВКЛ"; border-radius: 0 100px 100px 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3)); box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5); } #payt4:checked [for="payt4"]:after { background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0)); box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4); color: rgba(0,0,0,.4); } #payt4:checked [for="payt4"]:before { box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3)); color: inherit; } </style> <input type="checkbox" id="payt4"/><label for="payt4"></label> <style> #payt5 {display: none;} [for="payt5"] { position: relative; display: block; width: 40px; height: 70px; border-style: solid; border-color: rgb(30, 30, 30); border-width: 10px 1px; border-radius: 30px; background-image: linear-gradient(to right, rgb(45, 45, 45), rgb(75, 75, 75), rgb(45, 45, 45)); box-shadow: 0 0 0 1px rgb(22, 22, 22), 0 0 0 2px rgb(100, 100, 100), 0 0 0 3px rgb(20, 20, 20), 0 0 0 4px rgb(200, 200, 200); cursor: pointer; } [for="payt5"]:before { content: ""; position: absolute; left: 5px; top: 22px; display: block; width: 28px; height: 26px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 100%; background: #ccc radial-gradient(#ccc, rgb(0, 0, 0) 80%); } [for="payt5"]:after { content: ""; position: absolute; left: 8px; top: 2px; width: 24px; height: 10px; border-bottom: 2px solid rgb(174, 178, 179); border-radius: 100%; background: rgb(85, 85, 85) linear-gradient(to right, rgb(95, 95, 95), rgb(135, 135, 135)); } [for="payt5"] span { position: absolute; left: 8px; top: 8px; width: 24px; height: 36px; border-bottom: 1px solid #000; border-radius: 0 0 20px 20px; background: rgb(51, 51, 51) linear-gradient(to right, rgb(17, 17, 17), rgb(119, 119, 119) 40%, rgb(136, 136, 136), rgb(119, 119, 119) 60%, rgb(17, 17, 17)) no-repeat; } #payt5:checked [for="payt5"]:after { left: 8px; top: 58px; border-bottom: none; border-top: 2px solid rgb(174, 178, 179); } #payt5:checked [for="payt5"] span { top: 27px; -webkit-transform: scaleY(-1); transform: scaleY(-1); } </style> <input type="checkbox" id="payt5"/><label for="payt5"><span></span></label>
<style> #payt6 {display: none;} .switch { position: relative; display: block; width: 70px; height: 70px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.15), inset 0 0 0 3px #fff, inset 0 5px 5px 1px rgba(0,0,0,0.13); } [for="payt6"] { position: absolute; left: 8px; top: 8px; display: block; height: 52px; width: 52px; border: 1px solid rgb(150,150,150); border-radius: 30px; background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 0 1px rgba(255,255,255,0.13), 0 3px 6px rgba(0,0,0,0.35); transition: .5s; cursor: pointer; } [for="payt6"]:before, [for="payt6"]:after { content: ""; position: absolute; top: 8px; height: 36px; width: 21px; } [for="payt6"]:before { left: 2px; border-radius: 30px 10px 10px 30px; background: #fff linear-gradient(to left, #cbc7bc, #d2cbc3); box-shadow: -2px 0 5px rgba(0,0,0,0.2) inset; } [for="payt6"]:after { right: 2px; border-radius: 10px 30px 30px 10px; background: #fff linear-gradient(to right, #cbc7bc, #d2cbc3); box-shadow: 2px 0 5px rgba(0,0,0,0.2) inset; } #payt6:checked .switch label { transform: rotate(90deg); background: linear-gradient(to right, #f7f2f6, #b2ac9e); box-shadow: inset 0 0 1px rgba(255,255,255,0.13), 3px 0 6px rgba(0,0,0,.35); } </style> <input type="checkbox" id="payt6"/><div class="switch"><label for="payt6"></label></div>

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

Большинство вещей не решить только CSS. Нужно подключать JavaScript.

<input type="checkbox" id="shest0"> <script> var c = document.querySelector('#shest0'); c.onclick = function() { if (c.checked) { alert( 'чекбокс включён' ); } else { alert( 'чекбокс выключён' ); } } </script> Иногда нужно так <input type="checkbox" id="shest001"> <script> var c = document.querySelector('#shest001'); c.onclick = function() { alert( 'чекбокс выключён' ); if (c.checked) { alert( 'чекбокс включён' ); } } </script> Если группа <input type="checkbox" name="shest01"> <input type="checkbox" name="shest01"> <script> var gr = document.getElementsByName('shest01'); window.onclick = function() { for(var i=0; i<gr.length; i++) if (gr[i].checked) { alert( 'чекбокс включён' ); } else { alert( 'чекбокс отключён' ); } } </script> Или так <input type="checkbox" name="shest02"> <input type="checkbox" name="shest02"> <script> var matches; (function(doc) { matches = doc.matchesSelector || doc.webkitMatchesSelector || doc.mozMatchesSelector || doc.oMatchesSelector || doc.msMatchesSelector; })(document.documentElement); document.addEventListener('click', function(e) { if ( matches.call( e.target, '[name="shest02"]:checked' ) ) { alert( 'чекбокс включён' ); } }, false); </script> Или так . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения. <input type="checkbox" name="shest03" onclick="klik();"> <input type="checkbox" name="shest03" onclick="klik();"> <input type="checkbox" name="shest03" onclick="klik();"> <script> function klik() { var c = [].filter.call(document.querySelectorAll('[name="shest03"]'), function(e) {return e.checked == true;}); c.forEach(function(eC) { alert('чекбокс включён'); }); } </script>

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

<input type="checkbox" onclick="klik1();" name="shest04"> <input type="checkbox" onclick="klik1();" name="shest04"> <input type="checkbox" onclick="klik1();" name="shest04"> <script> var vse = document.getElementsByName('shest04'); function klik1() { if (Array.prototype.every.call(vse, function(e) {return e.checked == true;})) { alert( 'все чекбоксы включёны' ); } else { alert( 'нажмите все флажки' ); } } </script> Второй вариант можно увидеть в примере ниже.

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

<input type="checkbox" id="shest10"> <script> function RAZ911() { var c = document.querySelector('#shest10'); if (!c.checked) c.checked = true; } RAZ911(); </script>

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

<input type="radio" name="shest10"> <input type="radio" name="shest10"> <script> function RAZ911() { var c = document.getElementsByName('shest10'); if (!c[1].checked) c[1].checked = true; } RAZ911(); </script>

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

Задача:

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

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

Check all <fieldset id="shest"> <legend><input type="checkbox"> Check all</legend> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </fieldset> <script> var main = document.querySelector('#shest legend [type="checkbox"]'), all = document.querySelectorAll('#shest > [type="checkbox"]'); for(var i=0; i<all.length; i++) { all[i].onclick = function() { var allChecked = document.querySelectorAll('#shest > [type="checkbox"]:checked').length; main.checked = allChecked == all.length; main.indeterminate = allChecked > 0 && allChecked < all.length; } } main.onclick = function() { for(var i=0; i<all.length; i++) { all[i].checked = this.checked; } } </script>

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

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

Первая форма: Check all Check all Вторая форма: Check all Check all Первая форма: <form> <fieldset class="shest1"> <legend><input type="checkbox"> Check all</legend> <label><input type="checkbox"></label> <label><input type="checkbox"></label> <label><input type="checkbox"></label> </fieldset> <fieldset class="shest1"> <legend><input type="checkbox"> Check all</legend> <label><input type="checkbox"></label> <label><input type="checkbox"></label> <label><input type="checkbox"></label> </fieldset> </form> Вторая форма: <form> <fieldset class="shest1"> <legend><input type="checkbox"> Check all</legend> <label><input type="checkbox"></label> <label><input type="checkbox"></label> <label><input type="checkbox"></label> </fieldset> <fieldset class="shest1"> <legend><input type="checkbox"> Check all</legend> <label><input type="checkbox"></label> <label><input type="checkbox"></label> <label><input type="checkbox"></label> </fieldset> </form> <script> for (var u = document.getElementsByTagName("form"), i = 0; i < u.length; i++) u[i].onmouseover = function (b) { l = u[i].getElementsByTagName("fieldset"); for (var k = 0; k < l.length; k++) if (l[k].className == "shest1") l[k].onmouseover = function (a) { var main1 = document.querySelector('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') legend [type="checkbox"]'), all1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]'); for(var j=0; j<all1.length; j++) all1[j].onclick = function() { var allChecked1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]:checked').length; main1.checked = allChecked1 == all1.length; main1.indeterminate = allChecked1 > 0 && allChecked1 < all1.length; } main1.onchange = function() { for(var j=0; j<all1.length; j++) all1[j].checked = this.checked; } }(k) }(i) </script>

Но лучше с помощью 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, а этого не происходит.
1 2 2.1 2.1.1 2.1.1.1 2.1.1.2 2.1.1.3 2.1.2 2.1.3 2.2 2.3 2.4 3 3.1 3.2 3.3 <style> [name="Tree"] fieldset {border: none;} [name="Tree"] label:after {content: '\A'; white-space: pre;} </style> <form name="Tree"> <fieldset> <label><input type="checkbox"> 1</label> <label><input type="checkbox"> 2</label> <fieldset> <label><input type="checkbox"> 2.1</label> <fieldset> <label><input type="checkbox"> 2.1.1</label> <fieldset><label><input type="checkbox"> 2.1.1.1</label> <label><input type="checkbox"> 2.1.1.2</label> <label><input type="checkbox"> 2.1.1.3</label> </fieldset> <label><input type="checkbox"> 2.1.2</label> <label><input type="checkbox"> 2.1.3</label> </fieldset> <label><input type="checkbox"> 2.2</label> <label><input type="checkbox"> 2.3</label> <label><input type="checkbox"> 2.4</label> </fieldset> <label><input type="checkbox"> 3</label> <fieldset> <label><input type="checkbox"> 3.1</label> <label><input type="checkbox"> 3.2</label> <label><input type="checkbox"> 3.3</label> </fieldset> </fieldset> </form> <script> var t = document.forms.Tree; var fieldset = [].filter.call(t.querySelectorAll('fieldset'), function(element) {return element;}); fieldset.forEach(function(eFieldset) { var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;}); main.forEach(function(eMain) { var all = eFieldset.querySelectorAll('[type="checkbox"]'); eFieldset.onchange = function() { var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length; eMain.checked = allChecked == all.length; eMain.indeterminate = allChecked > 0 && allChecked < all.length; } eMain.onclick = function() { for(var i=0; i<all.length; i++) all[i].checked = this.checked; } }); }); </script> Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.

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

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

  1. плюсик и минус работают только если ни один из потомков не выделен,
  2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
  3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
  4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
  5. доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.
<style> .treeHTML { line-height: normal; } .treeHTML label { position: relative; display: block; padding: 0 0 0 1.2em; } .treeHTML label:not(:nth-last-of-type(1)) { border-left: 1px solid #94a5bd; } .treeHTML label:before { content: ""; position: absolute; top: 0; left: 0; width: 1.1em; height: .5em; border-bottom: 1px solid #94a5bd; } .treeHTML label:nth-last-of-type(1):before { border-left: 1px solid #94a5bd; } .treeHTML fieldset, .treeHTML fieldset[class=""] .razvernut { position: absolute; visibility: hidden; margin: 0; padding: 0 0 0 2em; border: none; } .treeHTML fieldset:not(:last-child) { border-left: 1px solid #94a5bd; } .treeHTML .razvernut { position: relative; visibility: visible; } .treeHTML > fieldset > legend, .treeHTML .razvernut > fieldset > legend { position: absolute; left: -5px; top: 0; height: 7px; width: 7px; margin-top: -1em; padding: 0; border: 1px solid #94a5bd; border-radius: 2px; background-repeat: no-repeat; background-position: 50% 50%; background-color: #fff; background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%); background-size: 1px 5px, 5px 1px, 100% 100%; visibility: visible; cursor: pointer; } .treeHTML fieldset[class=""] .razvernut fieldset legend { visibility: hidden; } .treeHTML .razvernut > legend { background-image: linear-gradient(#1b4964, #1b4964) !important; background-size: 5px 1px !important; } </style> <form name="Tree1" class="treeHTML" class="razvernut"> <label><input type="checkbox"> 1</label> <label><input type="checkbox"> 2</label> <fieldset><legend></legend> <label><input type="checkbox"> 2.1</label> <fieldset><legend></legend> <label><input type="checkbox"> 2.1.1</label> <fieldset><legend></legend> <label><input type="checkbox"> 2.1.1.1</label> <label><input type="checkbox"> 2.1.1.2</label> <label><input type="checkbox"> 2.1.1.3</label> </fieldset> <label><input type="checkbox"> 2.1.2</label> <label><input type="checkbox"> 2.1.3</label> </fieldset> <label><input type="checkbox"> 2.2</label> <label><input type="checkbox"> 2.3</label> <label><input type="checkbox"> 2.4</label> </fieldset> <label><input type="checkbox"> 3</label> <fieldset><legend></legend> <label><input type="checkbox"> 3.1</label> <label><input type="checkbox"> 3.2</label> <label><input type="checkbox"> 3.3</label> </fieldset> </form> <script> var t = document.forms.Tree1; [].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) { var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;}); main.forEach(function(eMain) { var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {return e.parentNode == eFieldset;}); l.forEach(function(eL) { var all = eFieldset.querySelectorAll('[type="checkbox"]'); eL.onclick = Razvernut; eFieldset.onchange = Razvernut; function Razvernut() { var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length; eMain.checked = allChecked == all.length; eMain.indeterminate = allChecked > 0 && allChecked < all.length; if (eMain.indeterminate || eMain.checked || ((eFieldset.className == '') && (allChecked == "0"))) { eFieldset.className = 'razvernut'; } else { eFieldset.className = ''; } } eMain.onclick = function() { for(var i=0; i<all.length; i++) all[i].checked = this.checked; if (this.checked) { eFieldset.className = 'razvernut'; } else { eFieldset.className = ''; } } }); }); }); </script>

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

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

<form name="Form"> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> </form> <script> var f = document.forms.Form; f.onchange = function() { var n = f.querySelectorAll('[type="checkbox"]'), l = f.querySelectorAll('[type="checkbox"]:checked'); for(var j=0; j<n.length; j++) if (l.length >= 3) { n[j].disabled = true; for(var i=0; i<l.length; i++) l[i].disabled = false; } else { n[j].disabled = false; } } </script>

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

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

Дальнейшие примеры при создании калькулятора или формы заказа на JavaScript

<form name="Sum"> <input type="checkbox" value="1"/> <input type="checkbox" value="2"/> <input type="checkbox"/> <input type="checkbox" value=""/> <input type="checkbox" value="3"/> <input type="checkbox" value="4"/> <input type="checkbox" value="5"/> <output id="rezultat">Сумма: 0</output> </form> <script> var s = document.forms.Sum, d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]'); for (var i = 0; i < d.length; i++) d[i].disabled = true; s.onchange = function() { var n = s.querySelectorAll('[type="checkbox"]'), itog = 0; for(var j=0; j<n.length; j++) n[j].checked ? itog += parseFloat(n[j].value) : itog; document.getElementById('rezultat').innerHTML = 'Сумма: ' + itog; } </script>
Источник: http://shpargalkablog.ru/2013/08/checked.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Cached Фото деревянных светильников своими руками



Как сделать неактивным кнопку в jquery Бесплатные объявления Саратова и Саратовской
Как сделать неактивным кнопку в jquery Всё для альбома своими руками. Мемуарис - самый
Как сделать неактивным кнопку в jquery Выкройки одежды для кукол Барби, Синди и их
Как сделать неактивным кнопку в jquery Двухуровневый потолок из гипсокартона своими руками
Как сделать неактивным кнопку в jquery Декор стены своими руками (61 фото преображаем свой дом)
Как сделать неактивным кнопку в jquery Игра Свинка Пеппа в магазине. Играть в Свинку
Как из глянцевой краски сделать матовую Как сделать БУКЕТЫ ИЗ Как сделать матовую краску из глянцевой? Класс TextBox (rms) - MSDN - Microsoft Можно делать так, чтобы к краям шла прозрачность с нарастанием от Открытый урок Подогрев для бассейна своими руками / Cамоделки для Сделать посещаемый сайт самостоятельно. Как