Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2016, 15:57
Новичок на форуме
Отправить личное сообщение для lok777i Посмотреть профиль Найти все сообщения от lok777i
 
Регистрация: 07.12.2016
Сообщений: 3

Открытие окна при всех 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.
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2016, 16:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от lok777i
Как сделать так, чтобы при выборе трех чекбоксов, срабатывало ксс свойство ? На данный момент скрипт работает, но не срабатывает ксс.
Селекторы ЦСС не работают "снизу вверх"... Они работают только "сверху вниз".

Т.ч. нужно писать программку.
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2016, 16:13
Новичок на форуме
Отправить личное сообщение для lok777i Посмотреть профиль Найти все сообщения от lok777i
 
Регистрация: 07.12.2016
Сообщений: 3

А что нужно добавить в скрипт чтобы при трех отмеченных инпутах просто появлялось окно с необходимым классом ?
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2016, 16:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от lok777i
А что нужно добавить в скрипт чтобы при трех отмеченных инпутах просто появлялось окно с необходимым классом ?
Отлавливать изменения всех флажков... Если они все отмечены - делать, что нужно.
Ответить с цитированием
  #5 (permalink)  
Старый 07.12.2016, 16:36
Новичок на форуме
Отправить личное сообщение для lok777i Посмотреть профиль Найти все сообщения от lok777i
 
Регистрация: 07.12.2016
Сообщений: 3

А нынешний скрипт этого не делает? То есть нельзя просто добавить одну строку кода, при которой display:none будет меняться на display:block ? И сколько же нужно заплатить за эту строку ? ))
Ответить с цитированием
  #6 (permalink)  
Старый 07.12.2016, 16:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.12.2016, 16:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от lok777i
И сколько же нужно заплатить за эту строку ?
Да сколько не жалко!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вызов функции при закритти окна браузера zerofx Events/DOM/Window 4 14.05.2015 10:37
Событие закрытия окна при window.open un3solka Events/DOM/Window 4 24.07.2013 19:46
Как запретить применение css при изменении окна браузера east (X)HTML/CSS 7 12.10.2012 21:23
Смена стилей страницы при изменении размера окна браузера goooooch Javascript под браузер 6 19.11.2011 18:49
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21