Javascript-форум - Открытие окна при всех input:checked

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Открытие окна при всех input:checked (https://javascript.ru/forum/misc/66306-otkrytie-okna-pri-vsekh-input-checked.html)

Открытие окна при всех input:checked

Здравствуйте, подскажите пожалуйста, есть 3 чекбокса http://jsfiddle.net/leaverou/ASPUA/

<label><input type="checkbox" id="checkall"> Check all</label>
<label><input type="checkbox" class="thing"> Thing 1</label>
<label><input type="checkbox" class="thing"> Thing 2</label>
<label><input type="checkbox" class="thing"> Thing 3</label>

и скрипт

var checkboxes = document.querySelectorAll('input.thing'),
    checkall = document.getElementById('checkall');

for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
        var checkedCount = document.querySelectorAll('input.thing:checked').length;

        checkall.checked = checkedCount > 0;
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
}

checkall.onclick = function() {
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    }
}

в css добавляем

Код:

#checkall:checked{

  display:none;

}

Как сделать так, чтобы при выборе трех чекбоксов, срабатывало css свойство ? На данный момент скрипт работает, но не срабатывает css.

Цитата:

Сообщение от lok777i

Как сделать так, чтобы при выборе трех чекбоксов, срабатывало ксс свойство ? На данный момент скрипт работает, но не срабатывает ксс.

Селекторы ЦСС не работают "снизу вверх"... Они работают только "сверху вниз".

Т.ч. нужно писать программку. ;)

А что нужно добавить в скрипт чтобы при трех отмеченных инпутах просто появлялось окно с необходимым классом ?

Цитата:

Сообщение от lok777i

Отлавливать изменения всех флажков... Если они все отмечены - делать, что нужно.

А нынешний скрипт этого не делает? То есть нельзя просто добавить одну строку кода, при которой display:none будет меняться на display:block ? И сколько же нужно заплатить за эту строку ? ))

Цитата:

Сообщение от lok777i

А нынешний скрипт этого не делает?

Очевидно, что нет. :)

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<label><input type="checkbox" id="checkall"> Check all</label>
<label><input type="checkbox" class="thing"> Thing 1</label>
<label><input type="checkbox" class="thing"> Thing 2</label>
<label><input type="checkbox" class="thing"> Thing 3</label>
<script type='text/javascript'>
var checkboxes = document.querySelectorAll('input.thing'),
    checkall = document.getElementById('checkall');
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
        var all=document.querySelectorAll('.thing').length;
        var n=document.querySelectorAll('.thing:checked').length;
		checkall.parentNode.style.display=(n==all)? 'none': '';
    };
};
checkall.onclick = function() {
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    };
};
</script>
</body>
</html>

Цитата:

Сообщение от lok777i

И сколько же нужно заплатить за эту строку ?

Да сколько не жалко! :D