checked и radio с помощью html, css, javascript

  1. Атрибут checked=checked
  2. Псевдокласс :checked
  3. Красивые чекбоксы-переключатели «ВЫКЛ/ВКЛ». Как задать свой стиль checkbox
  4. Проверка чекбокса на включение/отключение
  5. Проверить, все ли чекбоксы помечены
  6. Установить checked в checkbox
  7. Установить checked в radio
  8. Выделить все checkbox 1 нажатием кнопки
  9. Ограничить область действия функции javascript. Функция исполняется только внутри конкретного тега
  10. Дерево из checkbox
  11. Деактивировать все флажки кроме нескольких отмеченных
  12. Как посчитать сумму значений value у выбранных чекбоксов

  1. Атрибут checked=checked

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

    <input checked=''type=checkbox><input checked=''type=checkbox><input type=checkbox>

    <input checked=''name=raz type=radio><input name=raz type=radio><input name=raz type=radio>

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

    С помощью css можно прописать, что будет происходить с другими нижестоящими элементами, когда кнопка нажата. Когда кнопка отжата, элементы будут возвращаться к исходному состоянию. Не работает в теге p!

    <style>.red{background:red;width:8%;height:8%}#a2:checked~.red{background:tan}</style><input id=a2 type=checkbox><div class=red></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

    Пока флажок не установлен, по ссылке пройти нельзя:
    ссылка, нажмите на меня

    <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 и селекторы в hrome

    Не работает

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

  3. Красивые чекбоксы-переключатели "ВЫКЛ ВКЛ". Как задать свой стиль 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>

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

    Большинство вещей не решить только 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 появляется по нарастающей. Если одна галочка, то одно сообщение, если 3 галочки, то 3 сообщения. 
    <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>

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

    <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>
    Второй вариант можно увидеть в примере ниже.

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

    <input type=checkbox id="shest10">

<script>
function RAZ911() {
var c=document.querySelector('#shest10');
if (!c.checked) c.checked=true; // поставить checked, если он не установлен
}
RAZ911();
</script>

  7. Установить 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>

  8. Выделить все 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>
main=document.querySelector('#shest legend[type=checkbox]'),
all=document.querySelectorAll('#shest>[type=checkbox]');
for(i=0;i<all.length;i++){//1 и 2 пункт задачи
all[i].onclick=function(){
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(i=0;i<all.length;i++) {
all[i].checked=this.checked;
}
}
</script>

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

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

    Первая форма:
    Check all
    Check all
    Вторая форма:
    Check all
    Check all 
    Форма 1:
<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>
Форма 2:
<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. См. код дерева.

  10. Дерево из checkbox

    Задача:

    1. если хотя бы 1 чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
    2. если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
    3. родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
    4. семантический код,
    5. у дерева может быть неограниченное число уровней, но скрипт и 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>

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

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

    1. плюсик и минус работают только если ни 1 из потомков не выделен,
    2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
    3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
    4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты. 
    <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>

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

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

    <form name=Form>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
</form>

<script>f=document.forms.Form;
f.onchange=function(){n=f.querySelectorAll('[type=checkbox]'),
l=f.querySelectorAll('[type=checkbox]:checked');
for(j=0;j<n.length;j++)
if(l.length>=3){// если отметить 3 и более галочки
n[j].disabled=true;// все чекбоксы становятся disabled
for(i=0;i<l.length;i++)
l[i].disabled=false;// но disabled убирается с помеченных галочками чекбоксов
}else{
n[j].disabled=false;// если выделить менее 3 галочек, то disabled снимается со всех чекбоксов
}}</script>

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

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

    Сумма: 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>

shpargalkablog.ru/2013/08/checked.html

Free Web Hosting