Радиоустановка показать/скрыть элементы в HTML с помощью функции javascript

Question

Когда флажок установлен, он включает переключатели. , когда выбран первый переключатель, он отображает скрытый абзац, но если выбран другой переключатель, абзац от первого переключателя должен быть скрыт (style.display='none'), а второй абзац для второго переключателя должен быть показан. https://jsfiddle.net/stevandrej/q3j9a2sj/2/ Строка 19 - 31

Answer 1

Я вводит некоторые изменения:

добавил один общий класс для всех необходимых P

HTML -

<p class="radio1 common-class" style="display:none">show me if radio1</p> 
<p class="radio2 common-class" style="display:none">show me if radio2</p> 

JS -

var arrP = document.getElementsByClassName("common-class"); 

    var intLength = arrP.length; 

    for(var k=0;k<intLength ;k++){ 

     arrP[k].style.display = 'none'; 

    } 

Вот обновленный Fiddle

Answer 2

Я рекомендую вам, что использует jQuery или прослушиватели событий другим способом. С вашим кодом вы повторяете все поля в каждом клике. Вы можете добиться того, что хотите с jquery в нескольких строках. Теперь вы проверяете только один элемент, если вы проверяете радио, вы слушаете только этот элемент и только тот, кто отвечает.

С JQuery:

$('.checkbox-classname').on('change', function() { 
     alert($(this).attr('id')); // alerts you with the id of the checkbox are checked 
});