- Атрибут checked="checked"
- Атрибут checked="checked" можно вызывать с помощью label
- Атрибут checked="checked" можно вызывать с помощью нескольких label
- Псевдокласс :checked
- Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox
- Проверка чекбокса на включение/отключение
- Проверить все ли чекбоксы помечены
- Установить checked в checkbox
- Установить checked в radio
- Выделить все checkbox одним нажатием кнопки
- Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
- Дерево из checkbox
- Деактивировать все флажки, кроме нескольких отмеченных
- Как посчитать сумму значений value у выбранных чекбоксов
- Псевдоклассы CSS
- document.getElementById, document.getElementsByName, document.querySelectorAll и др. и работа с ними
Атрибут 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>
<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>
<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.
<label for="tri">описание2</label><input type="checkbox" id="tri"/><label for="tri">описание1</label>
<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
- Tab-меню
- Слайдеры, галереи: 1, 2, 3
- Accordion
- Модальное окно
- Спойлер
- Пока флажок не установлен, по ссылке пройти нельзя:
ссылка, ну-ка, нажмите на меня
<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>
<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; // matchesSelector на момент написания статьи поддерживается только с префиксами (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; // поставить checked, если он не установлен } 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; // поставить checked на второй input, если он не установлен } RAZ911(); </script>
Выделить все checkbox одним нажатием кнопки
Задача:
- если отметить все checkbox, то будет отмечен и главный,
- если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
- если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Решение я нашла тут.
<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++) { // 1 и 2 пункт задачи 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() { // 3 for(var i=0; i<all.length; i++) { all[i].checked = this.checked; } } </script>
Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.
Первая форма: Вторая форма:Первая форма: <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
Задача:
- если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
- если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
- родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
- семантический код,
- у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.
Что не удалось:
- если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.
<style> [name="Tree"] fieldset {border: none;} [name="Tree"] label:after {content: '\A'; white-space: pre;} /* после label идёт как бы br */ /* если нужно скрыть дочерние чекбоксы, если на родителе не стоит флажок или :indeterminate*/ /* [name="Tree"] fieldset fieldset {padding-left: 20px; display: none;} [name="Tree"] [type="checkbox"]:checked + label + fieldset, [name="Tree"] [type="checkbox"]:indeterminate + label + fieldset {display: block;} */ </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. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.
- плюсик и минус работают только если ни один из потомков не выделен,
- если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
- если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
- если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
- доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.
<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; // все чекбоксы становятся disabled for(var i=0; i<l.length; i++) l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов } else { n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов } } </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++) // чтобы не было написано NaN, убираем в disabled пункты, где не прописаны значения 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>
80 комментариев:
а как сделать так что бы только при отмечании галочкой была возможность перейти на следующую старницу.
пример лицензионное соглашение - только при отмечании была возможность перейти на определённый URL , в если не было отмеченно и попытаться перейти по URL то выскакивало окно как в "Проверка чекбокса на включение/отключение"
зарание спасибо
<table id="demotable">
<thead>
<tr>
<th><input type="radio" name="all"/>
<th><input type="radio" name="all"/>
<th><input type="radio" name="all"/>
<tbody>
<tr>
<td><input type="radio" name="raz"/>
<td><input type="radio" name="raz"/>
<td><input type="radio" name="raz"/>
<tr>
<td><input type="radio" name="dva"/>
<td><input type="radio" name="dva"/>
<td><input type="radio" name="dva"/>
</table>
<script>
var main = document.getElementsByName('all');
[].forEach.call(main, function(item, n) {
var all = document.querySelectorAll('#demotable td:nth-child(' + (n+1) + ') [type="radio"]');
for(var i=0; i<all.length; i++) {
all[i].onclick = function() {
var allChecked = document.querySelectorAll('#demotable td:nth-child(' + (n+1) + ') [type="radio"]:checked').length;
item.checked = allChecked == all.length;
item.indeterminate = allChecked > 0 && allChecked < all.length;
}
}
item.onclick = function() {
for(var i=0; i<all.length; i++) {
all[i].checked = true;
}
}
});
</script>
нужно сделать окно над которым будут радио баттоны нажимая на которые, один текст сменяется другим в зависимости от нажатого радио баттона. радио баттоны подписаны 1,2,3....
!но при этом нажимая на радиобаттоны менялась и картинка в хедере!
https://yadi.sk/i/-DjMU_yQWPzhN
<style>
#In {
position: relative;
z-index: -1;
}
#InDa:checked ~ #In,
#InDa:checked ~ * #In,
#InDa:checked ~ * * #In {
z-index: auto;
}
</style>
<input type="checkbox" id="InDa"/> <input id="In"/>
http://jsfiddle.net/NZaw4/1/
Я буду очень благодарен, если подскажете:
Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?
С таблицей целиком получается, а отдельно с TD ячейкой не хочет работать.
Решение:
var c = document.querySelectorAll('input');
for (var i = 0; i < c.length; i++) {
c[i].onclick = function() {
if (this.checked) {
var td = document.querySelectorAll('table td:nth-child(n+4)');
for (var j = 0; j < td.length; j++) {
td[j].style.background = this.value;
}
}
}
}
См. http://jsfiddle.net/NMitra/veh95qdf/
<$cript src="http://code.jquery.com/jquery-1.9.1.js">-->
<$cript>
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");
})
});
За ранее благодарен за помощь.
<table>
<tr>
<td class="i"><input type="radio" checked="checked" name="raz" value="transparent"/>
<td class="i"><input type="radio" name="raz" value="red"/>
<td class="i"><input type="radio" name="raz" value="blue"/>
<td>червертая
<td>пятая
<tr>
<td class="i"><input type="radio" checked="checked" name="dva" value="transparent"/>
<td class="i"><input type="radio" name="dva" value="orange"/>
<td>третья
<td>червертая
<td>пятая
</table>
<script>
var c = document.querySelectorAll('table input');
for (var i = 0; i < c.length; i++) {
c[i].onclick = function() {
if (this.checked) {
var td = this.parentNode.parentNode.querySelectorAll('td:not(.i)');
for (var j = 0; j < td.length; j++) {
td[j].style.background = this.value;
}
}
}
}
</script>
Вот моя таблица: http://i.imgur.com/gfxTqiG.jpg
Форма методом POST отправляет данные с множество столбцов. Хочу, чтобы кнопка "оценить" не была доступна, пока хотя бы один пункт не выбран. Поигрался с примером, ничего не вышло, может есть секрет какой? Буду рад совету, спасибо.
var c = document.querySelectorAll('table input');
for (var i = 0; i < c.length; i++) {
c[i].onclick = function() {
document.querySelector('input[type="button"]').disabled = false;
}
}
Вам нужно почитать про селекторы:
http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
http://shpargalkablog.ru/2011/10/css-selectors.html
http://shpargalkablog.ru/2012/02/psevdoklassy-css.html
Это пример, не бойтесь его изменять и дорабатывать для своих нужд. Если у таблицы есть класс или id
document.querySelectorAll('.class input')
document.querySelectorAll('#id input')
или другой селектор
Если у submit есть id, то
document.querySelector('#id')
Если есть класс, то класс, любые цепочки
http://jsfiddle.net/tuq71ym7/1/
А на сайте не работает. Думал переменные совпадают или ещё что. Изменил всё что можно - неа :-)
Сам скрипт вставляю через сразу после кнопок Оценить (в хеадер или футтер нет возможности, нет доступа).
Как я понимаю подгружается свой css со своими настройками правильно?
Удобнее было бы прямо в css в описании какого-то класса или стиля указывать обработчику, какой параметр использовать. Есть ли такая возможность?
<!--[if IE]> <style>
body {
font-size: 120%;
}
</style> <![endif]-->
Если открыто одно описание - то никаких проблем нет - все свернутые пункты разворачиваются.
Если открыто несколько описаний - то работает только на первом, на остальных не работает из-за использования id.
Можно как-то решить проблему чисто на css без использования скриптов?
Заранее спасибо, Елена
код которого начинается так:
style
#payt2 {display: none;}
[for="payt2"] {
У меня не получается никак уже 3-й час...! Только сама кнопка отображается, и переключение работает. А нужный текст при положении ON не появляется. Под InstantCMS пытаюсь делать.
#payt2:not(:checked) + label + * { display: none; }
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= 3) { // если отметить три и более галочки
n[j].disabled = true; // все чекбоксы становятся disabled
for(var i=0; i<l.length; i++)
l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов
} else {
n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов
}
}
Если чекбоксы с label как сделать чтоб и label становился disabled?
<form name="Form">
<label><input type="checkbox"/>1</label>
<label><input type="checkbox"/>2</label>
<label><input type="checkbox"/>3</label>
<label><input type="checkbox"/>4</label>
<label><input type="checkbox"/>5</label>
</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;
n[j].parentNode.style.color = "#ccc";
for(var i=0; i<l.length; i++) {
l[i].disabled = false;
l[i].parentNode.style.color = "";
}
} else {
n[j].disabled = false;
n[j].parentNode.style.color = "";
}
}
</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 = function() {eFieldset.className = (eFieldset.className == '' ? 'razvernut' : '')}
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;
}
});
});
});
document.querySelector('#svernut').onclick = function() {
var all = t.querySelectorAll('fieldset');
for(var i=0; i<all.length; i++) {
all[i].className = '';
}
}
Весь пример http://jsfiddle.net/NMitra/uewct60o/
Кнопка №6 - for="payt6"
Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст...
Это что-то связанное с концом кода, я прав?
Заранее спасибо
<input type="checkbox" id="payt6"/><div class="switch"><label for="payt6"></label></div><div>текст</div>
В CSS допишите
#payt6:not(:checked) + .switch + div {
display: none;
}
Вот мой вариант -
< input type="checkbox" id="vosem">
Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
< button id="vvv">описание 1< /button>
< button id="eee" disabled="disabled">описание 2< /button>
#vvv {
display: none;
}
#vosem:checked ~ #eee {
display: none;
}
#vosem:checked ~ #vvv {
display: inline-block;
}
он работает только если инпут и кнопки расположены рядом, а как сделать что бы работало вне зависимости от положения друг относительно другу?
Родительский селектор есть, но он ещё пока не поддерживается браузерами. Тогда бы совсем просто было.
Подскажите, пожалуйста, как сделать, в случае дерева чекбоксов, чтобы они не только отмечались в зависимости от отметки родительского, а и выполняли функции, подвязанные на них? В моём случае - это показ/скрытие Overlay на карте Google.
Спасибо!
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 = '';
}
}
укажите
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';
muFunction();
} else {
eFieldset.className = '';
}
}