0

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

<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 type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", 
"cat1");'/>Показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' 
/>Показать содержимое категории 2
<br />
<div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
<input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' 
/>Показать содержимое категории 3
<br />
<div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div></div>

1 ответ 1

3

Нужно в самом начале функции showOrHide сделать невидимыми все контейнеры:

function showOrHide(cb, cat) {
    
    document.getElementById('cat1').style.display = "none";
    document.getElementById('cat2').style.display = "none";
    document.getElementById('cat3').style.display = "none";
    
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
      else cat.style.display = "none";
    }
<div><input type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", 
"cat1");'/>Показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' 
/>Показать содержимое категории 2
<br />
<div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
<input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' 
/>Показать содержимое категории 3
<br />
<div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div></div>

Если же div-ов будет много, то можно добавить им type, далее с помощью document.querySelectorAll получить массив нужных div-ов, потом, проходя по этому массиву, ставить style.display = "none" (в сниппете type = 'mytype').

function showOrHide(cb, cat) {   
  var divs = document.querySelectorAll('div[type=mytype]');
  for(var i=0; i < divs.length; i++)
     divs[i].style.display = "none";
    
  cb = document.getElementById(cb);
  cat = document.getElementById(cat);
  if (cb.checked) cat.style.display = "block";
     else cat.style.display = "none";
  }
<div><input type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", 
"cat1");'/>Показать содержимое категории 1
<br />
<div type = 'mytype' id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' 
/>Показать содержимое категории 2
<br />
<div type = 'mytype' id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
<input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' 
/>Показать содержимое категории 3
<br />
<div type = 'mytype' id = 'cat3' style = 'display: none;'>Содержимое категории 3</div></div>

2
  • Спасибо огромное дружище!
    – user245927
    16 апр 2017 в 14:25
  • Ок. Отмечай ответ как правильный, если это то, что было нужно.
    – Sv__t
    16 апр 2017 в 14:32

Ваш ответ

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

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