Javascript-форум - в зависимости от radio скрыть или отобразить тот или иной div

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

- jQuery (https://javascript.ru/forum/jquery/)

- - в зависимости от radio скрыть или отобразить тот или иной div (https://javascript.ru/forum/jquery/47219-v-zavisimosti-ot-radio-skryt-ili-otobrazit-tot-ili-inojj-div.html)

в зависимости от 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 который расположен в том же <div class="item"></div>

в котором был выбран радио боттон.

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>

Цитата:

Сообщение от рони (Сообщение 311826)

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

Цитата:

Сообщение от рони (Сообщение 311822)

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

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

Цитата:

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

При этом варианте можно выбрать в итоге и 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>