@ledokol88

Как сделать что-бы Сheckbox окрывал только соответствующий блок?

Есть набор 4-х блоков. Нужно чтобы при выборе определенного checkbox открывался только соответствующий ему блок. Сейчас при выборе любого checkbox открываются сразу все. Как этого збежать? Можно ли это сделать только css&?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
	<style>
		.data1{display: none; height: 100px; width: 100px; background: #E40B0F;}
		.data2{display: none; height: 100px; width: 100px; background: #000;}
		.data3{display: none; height: 100px; width: 100px; background: #0034FF;}
		.data4{display: none; height: 100px; width: 100px; background: #00FF3C;}
		
		[type=checkbox]:checked~.data1{display: block;}
		[type=checkbox]:checked~.data2{display: block;}
		[type=checkbox]:checked~.data3{display: block;}
		[type=checkbox]:checked~.data4{display: block;}
		</style>
</head>

<body>
<input type="checkbox" id="data1" name="data1"  class="data"><br>
<input type="checkbox" id="data2" name="data2"  class="data"><br>
<input type="checkbox" id="data3" name="data3"  class="data"><br>
<input type="checkbox" id="data4" name="data4"  class="data"><br>
	
        <div class="data1">data1</div>
		<div class="data2">data2</div>
		<div class="data3">data3</div>
		<div class="data4">data3</div>	
	
</body>
</html>
  • Вопрос задан
  • 78 просмотров
Решения вопроса 2
@barolina
turn coffee into code
Ответ написан
Комментировать
wisgest
@wisgest
Не ИТ-специалист
Вероятно, не [type=checkbox]:checked, а #data1:checked, #data2:checked
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы