Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрыть дивы радиокнопкой (https://javascript.ru/forum/jquery/59078-skryt-divy-radioknopkojj.html)

rodiony4 26.10.2015 22:43
Скрыть дивы радиокнопкой
 
Всем привет, помогите сделать
имеются радиокнопки, если поставить точку на радио id="ss", то дивы box1 и box2 должны скрыться
если точку с радио id="ss" убрать (нажать другую радиокнопку) - дивы box1 и box2 снова показываются
у меня дивы скрываются, но снова показываться не хотят
<script type="text/javascript">
$('#ss').change(function () {
	$('#box1, #box2')[this.checked ? 'hide' : 'show'](500);
});
</script>


<input id="ss" name="inp" value="" type="radio"> скрыть Div1 и Div2
<br>
<input id="mm" name="inp" value="" type="radio"> 
<br>
<input id="rr" name="inp" value="" type="radio"> 

<div id="box1">Div1</div>
<div id="box2">Div2</div>

Vlasenko Fedor 26.10.2015 23:35 
<style>#ss:checked ~ #box1, #ss:checked ~ #box2 {
    display: none;
}</style>
<input id="ss" name="inp" value="" type="radio"> скрыть Div1 и Div2
<br>
<input id="mm" name="inp" value="" type="radio"> 
<br>
<input id="rr" name="inp" value="" type="radio"> 

<div id="box1">Div1</div>
<div id="box2">Div2</div>

Вариант :)

рони 26.10.2015 23:42
Цитата:
Сообщение от rodiony4
но снова показываться не хотят
потому что всегда this.checked будет true :cray:

рони 26.10.2015 23:46
rodiony4,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function(){
$('[name="inp"]').change(function () {
	$('#box1, #box2')[this.id == 'ss' ? 'hide' : 'show'](500);
});
});
  </script>
</head>

<body>  <input id="ss" name="inp" value="" type="radio"> скрыть Div1 и Div2
<br>
<input id="mm" name="inp" value="" type="radio">
<br>
<input id="rr" name="inp" value="" type="radio">
<div id="box1">Div1</div>
<div id="box2">Div2</div>
</body>

</html>

rodiony4 27.10.2015 00:41
рони, спасибо, теперь дивы скрываются и снова показываются.
Хочу также сделать с другой радиокнопкой - например
нажал на первый радио - два дива скрылись
нажал на второй радио - скрылся один див
радиокнопок будет много и много дивов которые нужно будет скрывать и показывать
так не получилось 
<script type="text/javascript">
$(function(){
$('[name="inp"]').change(function () {
	$('#box1, #box2')[this.id == 'ss' ? 'hide' : 'show'](500);
	$('#box1')[this.id == 'mm' ? 'hide' : 'show'](500);
});
});
</script>

рони 27.10.2015 00:48
rodiony4,
сначала всё скрыть -- потом показать что нужно.

rodiony4 27.10.2015 01:21
рони, можно подробнее
Цитата:
Сообщение от рони (Сообщение 393150)
rodiony4,
сначала всё скрыть
дивов будет очень много - все перечислять и потом скрывать?
Цитата:
Сообщение от рони (Сообщение 393150)
rodiony4,
потом показать что нужно.
нужно показать дивы только тогда - когда точки на радиокнопке нет, если точка стоит - див(ы) скрыты

рони 27.10.2015 01:45
Цитата:
Сообщение от rodiony4
нужно показать дивы только тогда - когда точки на радиокнопке нет, если точка стоит - див(ы) скрыты
как и что вы хотите показать или скрыть, не понял, но как вариант
всем радио кнопкам один класс -- всем блокам другой и берите индекс и показывайте что вам нужно согласно индексу ...

rodiony4 27.10.2015 02:29
рони, у радиокнопок нет класса (виртуемарт joomla), у дивов класс есть
постараюсь объяснить что нужно,
первый радио id="ss" - нажали на него (поставили точку) дивы #box1 и #box2 скрылись, сняли точку (например кликнули последний радио) - дивы снова показались
второй радио id="mm" - нажали на него див #box1 скрылся, кликнули на последний радио - #box1 показан
третий, четвертый и тд радио - ничего не скрывается

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

рони 27.10.2015 02:43
Цитата:
Сообщение от rodiony4
вы мне уже показали пример с первой радиокнопкой, как сделать тоже самое со второй радиокнопкой?
никак -- если нужно задействовать все кнопки, проще использовать индекс.

1 -> показать блок 1
2 -> показать блок1 и блок2
примерно так
Цитата:
Сообщение от rodiony4
постараюсь объяснить что нужно,
не осилил

Vlasenko Fedor 27.10.2015 03:54
Цитата:
Сообщение от rodiony4
у радиокнопок нет класса (виртуемарт joomla)
ищите хорошо, все там есть, и с Joomla шаблонизацией не должно быть никаких вопросов по добавлению классов элементов. Правьте шаблон вывода или описания шаблона вывода xml


Часовой пояс GMT +3, время: 17:38.