Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Событие onchange(checkbox) для двух div (https://javascript.ru/forum/dom-window/68699-sobytie-onchange-checkbox-dlya-dvukh-div.html)

rafaello 03.05.2017 16:59

Событие onchange(checkbox) для двух div
 
Здравствуйте.
function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById("cat_" + cat);
	disc_cat = document.getElementById("disc_cat_" + cat);
    if (cb.checked){ 
		cat.style.display = "block";
	    disc_cat.style.display = "block";}
    else {cat.style.display = "none";
	     disc_cat.style.display = "none";}
  }

<input type="checkbox" name="cb1" id="check1" value="1" checked="checked" onchange = 'showOrHide("check1", 1);' />
<input type="checkbox" name="cb2" id="check2" value="2" checked="checked" onchange = 'showOrHide("check2", 2);' />

$items = array(1, 2);
$i = 1;
foreach($items as $item){
echo '<div name="qu-qu" id="cat_' .$i. '">здесь идет код</div>';
echo '<div name="quqareku" id="disc_cat_' .$i. '">здесь другой код</div>';
$i++;
}

Проблема в том, что при нажатии на чекбокс срабатывает "display:none;" только для первого дива. Второй див ни в какую не работает. Выдает ошибку:"Cannot read property 'style' of null"
Пожалуйста, подскажите, как сделать так, чтобы при нажатии на чекбокс сработало сразу два дива одновременно.
Спасибо!

рони 03.05.2017 17:54

rafaello,
строки 3 и 4 поменяйте местами

rafaello 03.05.2017 18:38

Ура... заработало!!!
А что это было? Как это понять?

rafaello 03.05.2017 19:15

Заодно подскажите пожалуйста...
В момент срабатывания функции showOrHide() кроме того, что она изменяет стиль с "display:none" на "display:block", надо еще изменить класс.
Было
class="currtext required qtc_requiredoption"
Надо
class="currtext"
Что надо дописать в эту функцию, чтобы еще изменять класс?

рони 03.05.2017 19:30

Цитата:

Сообщение от rafaello
Как это понять?

строка 3: вы число превратили в обьект
строка 4: строку "disc_cat_" сложили с обьектом --- такого id естественно нет.
Цитата:

Сообщение от rafaello
надо еще изменить класс.

бессмысленно, но можно так

cat.className = "currtext" 
//....
cat.className = "currtext required qtc_requiredoption"

rafaello 03.05.2017 20:40

Понял.... Спасибо за помощь!!!!


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