Всё о <input type="checkbox"/> <input type="radio"/> | CSS & HTML & JavaScript

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

  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>

<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 одним нажатием кнопки

Задача:

  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++) {  // 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.

Первая форма:
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, а этого не происходит.
<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. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.

  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; // все чекбоксы становятся 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

Сумма: 0
<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>
в f t
наверх ↑

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

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

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

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

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

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

Решение:

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

<$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");
})
});


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

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

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;
}
}
FOMUVI
Что-то не получается. Я с Java не знаком вообще. Чтобы заработало, нужно обязательно в HEAD поместить скрипт (нет возможности)? И у меня кнопка "оценить" это submit, потому нужно так написать document.querySelector('input[type="submit"]').disabled = false; ? Кстати, у таблицы есть класс CSS, это не мешает?
NMitra
Скрипт добавляйте в конец страницы, поближе к футеру, а лучше за него. Вернее сначала HTML, а затем тег <script> с содержимым скрипта.

Вам нужно почитать про селекторы:
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')
Если есть класс, то класс, любые цепочки
NMitra
* Вернее сначала HTML код таблицы и кнопки
FOMUVI
Спасибо, я уже стал понимать о чем речь, но как бы не пытался - не срабатывает. Уже хотел бросить, но решил свою таблицу в ваш пример вставить и он там работает!
http://jsfiddle.net/tuq71ym7/1/
А на сайте не работает. Думал переменные совпадают или ещё что. Изменил всё что можно - неа :-)
Сам скрипт вставляю через сразу после кнопок Оценить (в хеадер или футтер нет возможности, нет доступа).
FOMUVI
Режеться любой код :( вставляю через Скрипт (обычная вставка в html)
NMitra
Тут я уже не помощник, обращайтесь к разработчику CMS
Максим Бойко
Здравствуйте! Появился такой вопрос. В css указан размер шрифта, равный 10px (em,pt не важно). В осле загружаешь сайт - он выглядит убого. Есть ли возможность в css внедрить условие или в html страницу, которое проверяет что за браузер и соответственно использует спец параметры для отображения? Видел в коде пишут следующее

Как я понимаю подгружается свой css со своими настройками правильно?
Удобнее было бы прямо в css в описании какого-то класса или стиля указывать обработчику, какой параметр использовать. Есть ли такая возможность?
NMitra
Здравствуйте, делается через комментарии: <!--[if IE]>скрипты, стили, HTML только для IE<![endif]-->

<!--[if IE]> <style>
body {
font-size: 120%;
}
</style> <![endif]-->
Анонимный
Спасибо!!!
Анонимный
Большое спасибо за статью. очень познавательно и масса практически применимых примеров! Многому здесь учусь.
NMitra
Спасибо за отзывы! Значит я двигаюсь в правильном направлении.
Анонимный
Добрый день! А можете подсказать какую-нибудь идею, кроме той, которая описана в разделе "Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега"... есть список однотипных объектов. со страницы можно открыть несколько описаний этих объектов (от 1 до n) и они все одновременно будут открыты. В описании объекта атрибуты сгруппированы в аналог аккордеон-меню со скрытыми чекбоксами. В html стоят id Input и for в label этого inputa (попробовала сделать input внутри label без использования id - вообще так не работает)

Если открыто одно описание - то никаких проблем нет - все свернутые пункты разворачиваются.
Если открыто несколько описаний - то работает только на первом, на остальных не работает из-за использования id.

Можно как-то решить проблему чисто на css без использования скриптов?
Заранее спасибо, Елена
NMitra
Добрый день, можно прописать стили классу (как тут http://shpargalkablog.ru/2013/11/drop-down-list.html ) или input поставить рядом с label (как тут http://shpargalkablog.ru/2011/07/accordion-css.html )
Анонимный
дуже допомогло
NMitra
Я рада :)
Вячеслав
Здравствуйте. Очень полезная статья. Огромное спасибо. Только возник один вопрос. Есть такая структура, допустим 3 столбца, и одна строка, получается 3 ячейки, в каждой ячейке по 2 checkbox, выбираешь один, второй становится неактивным (это я увидел в Вашей статье, очень помогло), а как сделать, чтобы при выборе, допустим значения из первой ячейки, появлялась определенная цена, а потом при выборе чекбокса в других ячейках цена оставалась неизменной, и наоборот, выбираешь чекбокс во второй ячейке, цена увеличивается, а при выборе остальных, остается неизменной?
NMitra
Здравствуйте, сделайте пример в http://jsfiddle.net/ (хотя бы приблизительно что вы хотите). Я бы использовала разный name.
Анонимный
???!!!Объясните новичку в html, пожалуйста, как вставить открывающийся текст в стилизованный переключатель OFF/ON
код которого начинается так:
style
#payt2 {display: none;}
[for="payt2"] {

У меня не получается никак уже 3-й час...! Только сама кнопка отображается, и переключение работает. А нужный текст при положении ON не появляется. Под InstantCMS пытаюсь делать.
NMitra
А в статье только форма кнопки дана. Её можно объединить с http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html Получится http://jsfiddle.net/NMitra/5azje8n4/ Всего-то одна строка нужна

#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?
NMitra
Добрый день, пример http://jsfiddle.net/NMitra/pqtmws5w/1/

<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>
Анонимный
Супер, спасибо огромное все работает)
Анонимный
Очень ёмко! А вот вопрос на засыпку:
По нажатию на кнопку меню открывается форма входа, в виде выпадающего списка. в ней есть один чекбокс, и когда на него нажимаешь форма сворачивается. Как это предотвратить?
NMitra
Нужен код.
Анонимный
извините за беспокойство, но уже разобралась.
ох уж эти красивые переключатели залипонные!) правда вписать их в дизайн сайта, наверное, довольно сложно...а знаете хоть один пример такой?
NMitra
Элементы формы так нагляднее получаются http://www.lukew.com/ff/entry.asp?1950
Анонимный
Добрый день. Подскажите пожалуйста, что надо добавить что бы сворачивать ветви не зависимо от того что выделено в дереве с чекбоксами, и второй вопрос, как можно свернуть js дерево по событию?
Большое спасибо.
NMitra
Добрый день,на ваш вопрос не ответить мимоходом, а выделить время я смогу лишь на следующей недели. Если вас устроит, отпишитесь в комментариях.
Анонимный
Да, конечно устроит. Буду ждать. Большое спасибо.
NMitra
Независимая работа

var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {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;
}
});
});
});
NMitra
По второму пункту

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"

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

<input type="checkbox" id="payt6"/><div class="switch"><label for="payt6"></label></div><div>текст</div>

В CSS допишите

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

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

< 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;
}


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

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

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

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 = '';
}
}