Как сделать при наведении на текст появлялась картинка

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

Атрибут 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


Поделись с друзьями



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



Плавная трансформация CSS свойство transition Как вытянуть авто своими руками


Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка Как сделать при наведении на текст появлялась картинка

ШОКИРУЮЩИЕ НОВОСТИ