В зависимости от radio скрыть или отобразить тот или иной div

есть группа товаров помещенных в .item вот такой код имеет примерно
<div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров" checked> 40 см.<br>
<div style='display:none' id="30s">цена за 30см</div>
<div style='display:none' id="40s">цена за 40см</div>
</div>


<div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров" checked> 40 см.<br>
<div style='display:none' id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>


<div class="item">
....
</div>
нужно если выбран input type="radio" name="40sm" - был открыть только div#40s а если выбран input type="radio" name="30sm" то нужно чтоб был открыт только div#30sкак сделать код для JQuery чтобы открывался и скрывался только тот div#40s и div#30s который расположен в том же
в котором был выбран радио боттон.
6 ответов

ufaclub, а то что id одинаковые это нормально?


ufaclub, Вариант без js
<!DOCTYPE HTML>
<html>
<head>
 <title>Untitled</title>
 <meta charset="utf-8">
 <style type="text/css">
 .item div {
 display: none;
 }
 [name="30sm"]:checked ~ [id="30s"] {
 display: block;
 }
 [name="40sm"]:checked ~ [id="40s"] {
 display: block;
 }
 </style>
</head>

<body>
 <div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров"> 40 см.<br>
<div id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>


<div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров" checked> 40 см.<br>
<div id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>
</body>
</html>


ufaclub, Вариант без js
<!DOCTYPE HTML>
<html>
<head>
 <title>Untitled</title>
 <meta charset="utf-8">
 <style type="text/css">
 .item div {
 display: none;
 }
 [name="30sm"]:checked ~ [id="30s"] {
 display: block;
 }
 [name="40sm"]:checked ~ [id="40s"] {
 display: block;
 }
 </style>
</head>

<body>
 <div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров"> 40 см.<br>
<div id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>


<div class="item">
<input type="radio" name="30sm" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="40sm" value="40 сантиметров" checked> 40 см.<br>
<div id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>
</body>
</html>
При этом варианте можно выбрать в итоге и 30 и 40 см. в одном .item а нужно чтобы можно было выбрать или только 30 или только 40


ufaclub, а то что id одинаковые это нормально?
можно и без айди обойтись, мне главное использовать селекторы внутри item в котором и происходит выбор радиобаттона


При этом варианте можно выбрать в итоге и 30 и 40 см. в одном .item
переделайте html как вам нужно


ufaclub, или вам нужно сделать все input с одинаковым name? код ниже сработает и так и так
<!DOCTYPE HTML>
<html>
<head>
 <title>Untitled</title>
 <meta charset="utf-8">
 <style type="text/css">
 .item div {
 display: none;
 }
 .item input:first-of-type:checked ~ div:first-of-type {
 display: block;
 }
 .item input:last-of-type:checked ~ div:last-of-type {
 display: block;
 }
 </style>
</head>

<body>
 <div class="item">
<input type="radio" name="ky" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="ky" value="40 сантиметров"> 40 см.<br>
<div id="30s">цена за 30см</div>
<div id="40s">цена за 40см</div>
</div>


<div class="item">
<input type="radio" name="neky" value="30 сантиметров"> 30 см.<br>
<input type="radio" name="neky" value="40 сантиметров" checked> 40 см.<br>
<div>цена за 30см</div>
<div>цена за 40см</div>
</div>
</body>
</html>