Форум

rodiony4 · #1 (**permalink**) 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 · #2 (**permalink**) 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>

Вариант

рони · #3 (**permalink**) 26.10.2015, 23:42

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

но снова показываться не хотят

потому что всегда this.checked будет true

рони · #4 (**permalink**) 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 · #5 (**permalink**) 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>

рони · #6 (**permalink**) 27.10.2015, 00:48

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

rodiony4 · #7 (**permalink**) 27.10.2015, 01:21

рони, можно подробнее

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

rodiony4,
сначала всё скрыть

дивов будет очень много - все перечислять и потом скрывать?

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

rodiony4,
потом показать что нужно.

нужно показать дивы только тогда - когда точки на радиокнопке нет, если точка стоит - див(ы) скрыты

рони · #8 (**permalink**) 27.10.2015, 01:45

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

нужно показать дивы только тогда - когда точки на радиокнопке нет, если точка стоит - див(ы) скрыты

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

rodiony4 · #9 (**permalink**) 27.10.2015, 02:29

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

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

рони · #10 (**permalink**) 27.10.2015, 02:43

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

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

никак -- если нужно задействовать все кнопки, проще использовать индекс.

1 -> показать блок 1
2 -> показать блок1 и блок2
примерно так

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

постараюсь объяснить что нужно,

не осилил

Форум

Справочник

Discord чат

Курсы javascript