Форум

ufaclub · #1 (**permalink**) 14.05.2014, 16:10

есть группа товаров помещенных в .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>

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

рони · #2 (**permalink**) 14.05.2014, 16:26

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

рони · #3 (**permalink**) 14.05.2014, 16:40

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 · #4 (**permalink**) 14.05.2014, 17:05

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

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 · #5 (**permalink**) 14.05.2014, 17:09

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

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

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

рони · #6 (**permalink**) 14.05.2014, 17:49

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

При этом варианте можно выбрать в итоге и 30 и 40 см. в одном .item

переделайте html как вам нужно

рони · #7 (**permalink**) 14.05.2014, 18:25

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>

Форум

Справочник

Discord чат

Курсы javascript