Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2024, 10:33
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 253

Как выбрать div, если в нем все чебоксы пустые?
есть такой html
<div class="parametrs" n="Figures" tt="1">

 <div class="parametr-размер"><b>размер</b>

<label><input type="checkbox"><a>Большой</a></label>     
<label><input type="checkbox"><a>Маленький</a></label>     
<label><input type="checkbox"><a>Средний</a></label>     

</div>

 <div class="parametr-форма-hide"><b>форма</b>

<label><input type="checkbox"><a>квадрат</a></label>     
<label><input type="checkbox"><a>круг</a></label>     
<label><input type="checkbox"><a>треугольник</a></label>     

</div>

 <div class="parametr-цвет-hide"><b>цвет</b>

<label><input type="checkbox"><a>зеленый</a></label>     
<label><input type="checkbox"><a>красный</a></label>     
<label><input type="checkbox"><a>синий</a></label>     

</div>

</div>



как при помощи CSS стилей или JS выбрать те блоки <div class="parametr- в которых в данный момент не стот ни одной галочки?
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2024, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

sovsem-nub,
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        .er {
            border: 4px red solid;
        }
    </style>
</head>
<body>
    <div class="parametrs" n="Figures" tt="1">
        <div class="parametr-размер"><b>размер</b>
            <label><input type="checkbox"><a>Большой</a></label>
            <label><input type="checkbox"><a>Маленький</a></label>
            <label><input type="checkbox"><a>Средний</a></label>
        </div>
        <div class="parametr-форма-hide"><b>форма</b>
            <label><input type="checkbox"><a>квадрат</a></label>
            <label><input type="checkbox"><a>круг</a></label>
            <label><input type="checkbox"><a>треугольник</a></label>
        </div>
        <div class="parametr-цвет-hide"><b>цвет</b>
            <label><input type="checkbox"><a>зеленый</a></label>
            <label><input type="checkbox"><a>красный</a></label>
            <label><input type="checkbox"><a>синий</a></label>
        </div>
    </div>
    <script>
        let box = document.querySelector('.parametrs');
        const er = () => {
            document.querySelectorAll('.parametrs > div').forEach(div => div.classList.toggle('er', !div.querySelector(':checked')))
        };
        er();
        box.addEventListener('change', er)
    </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2024, 11:17
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

function selectNotCheckedDivs (container) {
	// Выбираем все дочерние div в контейнере
	const divs = [...container.querySelectorAll(':scope>div')];
	// Из них выбираем те, которые вообще имеют <input type="checkbox">
	const divsWithCheck = divs.filter(div => div.querySelector('input[type="checkbox"]'));
	// из ниx выбираем те, которые не имеют отмеченных
	const divsNotCheck = divsWithCheck.(div => ! div.querySelector('input[type="checkbox"]:checked'));
	return divsNotCheck;
}

const notCheckedDivs = selectNotCheckedDivs(document.querySelector('.parametrs'))

Последний раз редактировалось voraa, 12.02.2024 в 18:21.
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2024, 18:12
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

voraa, ":scope" с двоеточием нужно
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2024, 18:21
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

ruslan_mart,
Точняк. Поправил.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
как удалить все элементы в Div e ? Arfey Общие вопросы Javascript 14 10.06.2010 11:50
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42
Как вызвать функцию если менять надо не все параметры? britanik Общие вопросы Javascript 3 07.03.2009 23:13