0

Есть радиокнопка с подгружаемым контентом, всё работает за исключением одного - когда нажимаете Показать содержимое категории 1 и затем Показать содержимое категории 2, то содержимое категории 1 не убирается (не присваевается cat.style.display = "none";) Подскажите как сделать, что бы после выбора др. категории у не выбранных исчезало содержимое

    <script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  } 
</script>

Выбирете тариф
<div>
  <input name="gender" type = 'radio' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");'/>Показать содержимое категории 1
  <br />
  <div id = 'cat1' style = 'display: none;'><select id="srok-days">
                    <option selected="selected" value="10">10 дней</option>
                    <option value="20">20 дней</option>
                    <option value="30">30 дней</option>
                    <option value="31">1 месяц (31 дней)</option>
                    <option value="91">3 месяца (91 дней)</option>
                </select></div>
  <input name="gender" type = 'radio' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' />Показать содержимое категории 2
  <br />
  <div id = 'cat2' style = 'display: none;'><select id="srok-days">

                    <option value="365">1 год (365 дней)</option>
                    <option value="547">1,5 года (547 дней)</option>
                    <option value="735">2 года (735 дней)</option>
                    <option value="No limited">Неограничено</option>
                </select></div>
  <input name="gender" type = 'radio' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' />Показать содержимое категории 3
  <br />
  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
</div>
1
  • Можно применить ко всем элементам cat какой-то общий класс, к примеру cat-content. По клику скрывать все элементы cat-content и в конце отображать необходимый блок. Это если не выходить из текущей разметки. А так Вы бы могли оставить лишь классы (убрать идентификаторы) и работать уже с ними.
    – po4teda
    2 мая 2014 в 11:47

1 ответ 1

1

Возможно не самый крутой ответ и правильный, НО рабочий http://jsfiddle.net/6RfCL/

var inp = document.querySelectorAll('input[type="radio"]');
	for(i=0; i<inp.length; i++){
		inp[i].onclick = fun;
	}
	function fun(event){
		var allDiv = document.querySelectorAll('.need');
		for(j=0; j<allDiv.length; j++){
			allDiv[j].style.display = 'none';
		}
		s = event.target.nextSibling.nextSibling.nextSibling.nextSibling.style.display = 'block';

	}
<body>
 
Выбирете тариф
<div>
  <input name="gender" type = 'radio' id = 'cb1'/>Показать содержимое категории 1
  <br />
  <div id = 'cat1' style = 'display: none;' class="need"><select id="srok-days">
                    <option selected="selected" value="10">10 дней</option>
                    <option value="20">20 дней</option>
                    <option value="30">30 дней</option>
                    <option value="31">1 месяц (31 дней)</option>
                    <option value="91">3 месяца (91 дней)</option>
                </select></div>
  <input name="gender" type = 'radio' id = 'cb2'/>Показать содержимое категории 2
  <br />
  <div id = 'cat2' style = 'display: none;' class="need"><select id="srok-days">

                    <option value="365">1 год (365 дней)</option>
                    <option value="547">1,5 года (547 дней)</option>
                    <option value="735">2 года (735 дней)</option>
                    <option value="No limited">Неограничено</option>
                </select></div>
  <input name="gender" type = 'radio' id = 'cb3'/>Показать содержимое категории 3
  <br />
  <div id = 'cat3' style = 'display: none;' class="need">Содержимое категории 3</div>
</div>

</body>

скрипт в конец html, в скрипте много nextSibling т.к. есть различный текст и теги типо br по этому перебор элементов вызвал такое количество, а вообще проще через JQ toggle, надеюсь помог Вам

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.