Search for a tag by its attribute value and hide / display of the add. Block while radio is active

Question

Block id = "passport" by default is invisible. The task is to make the block with id = "passport" visible, if radio with the attribute value = '65 'is selected (active), if you select another radio, then hide the block with id = "passport".

Stopped in syntax, does not find value = '65 '. And maybe the logic is not true in this solution of the problem. I ask for help, is the correct way of thinking in solving the problem?

var subtree = document.getElementById('frameDelivery');//поиск в поддереве элемента с ID frameDelivery var elems = subtree.getElementsByTagName( 'input' );// находим всех потомков input и записываем в коллецию. //далее, осуществляем перебор элементов с условием, - ищем элемент с атрибутом value='65', как только нашли выполняем первое условие. for (var i = 0; i < elems.length; i++) { if (elems[i].getAttribute('value', 65) == 65) { /*if(true){ //первое условие: делаем снова проверку, активно ли данное radio, если да (checked="checked"), то выполнить код - назначить событие. Где, делаем видимым скрытый блок. } else { //если выбрали другой radio, то скрыть блок с id="passport" } */ } else { alert('Элемент не найден!'); } }

 #passport { display: none; }

 <div class="groups-form"> <div class="frame-label" id="frameDelivery"> <span class="title">Способ получения</span> <div class="frame-form-field check-variant-delivery"> <div class="frame-radio"> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="63"> </span> <div class="name-count"> <span class="text-el">Самовывоз</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="63">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="66"> </span> <div class="name-count"> <span class="text-el">Доставка курьером</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="66">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="64"> </span> <div class="name-count"> <span class="text-el">Доставка с монтажом</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="64">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="65"> </span> <div class="name-count"> <span class="text-el">Транспортной компанией</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="65">Подробнее</span> </div><!--end frame-radio--> </div><!--frame-form-field--> </div><!--frame-label--> </div><!--groups-form--> <div class="groups-form" id="passport"> <div class="frame-label"> {echo ShopCore::app()->CustomFieldsHelper->setRequiredHtml('<span class="must"></span>')->setPatternMain('pattern_custom_field')->getOneCustomFieldsByName('passportSeriesNumber','order')->asHtml()} </div> </div>

Answer 1 · 2018-02-16T11:04:18

If it is necessary in the context of your code, then you can do it like this:

 var elems = document.getElementsByName( 'deliveryMethodId' ); var el_checked = false; for (var i = 0; i < elems.length; i++) { if (elems[i].value == 65 && elems[i].checked) { el_checked = true; break; } } if (el_checked) { document.getElementById('passport').style.display = 'block'; } else { document.getElementById('passport').style.display = 'none'; }

But usually an event handler is set to the required <input type="radio"> , which checks this.value and, depending on the value, performs the necessary actions.

UPD: In order for the code to work when you switch the radio code you need to change this way.

 var elems = document.getElementsByName( 'deliveryMethodId' ); for (var i = 0; i < elems.length; i++) { elems[i].onclick = function() { if (this.value == 65) { document.getElementById('passport').style.display = 'block'; } else { document.getElementById('passport').style.display = 'none'; } } }

And you have in the condition of two checks that in this situation is redundant.
Two checks in the condition in order to determine that the current element has the desired value and that this element is selected (see question).
I can not understand what is wrong: jsfiddle.net/Delat/m2L00ybv/116
As I wrote in the answer, this solution is in the context of your code.
If you want changes to occur when you switch your radio , then you need to hang event handlers on them and the code, respectively, will also need to be changed.
@ikar, supplemented the answer with an option that works on a click.

Answer 2 · 2018-02-16T11:05:55

I did a little wrong)

 var subtree = document.getElementById('frameDelivery');//поиск в поддереве элемента с ID frameDelivery var elems = subtree.getElementsByTagName( 'input' );// находим всех потомков input и записываем в коллецию. //далее, осуществляем перебор элементов с условием, - ищем элемент с атрибутом value='65', как только нашли выполняем первое условие. for (var i = 0; i < elems.length; i++) { var t = elems[i].getAttribute('value'); if (t == 65) { alert("Да вот же он"); break; /*if(true){ //первое условие: делаем снова проверку, активно ли данное radio, если да (checked="checked"), то выполнить код - назначить событие. Где, делаем видимым скрытый блок. } else { //если выбрали другой radio, то скрыть блок с id="passport" } */ } else { alert('Элемент не найден!'); } }

 #passport { display: none; }

 <div class="groups-form"> <div class="frame-label" id="frameDelivery"> <span class="title">Способ получения</span> <div class="frame-form-field check-variant-delivery"> <div class="frame-radio"> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="63"> </span> <div class="name-count"> <span class="text-el">Самовывоз</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="63">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="66"> </span> <div class="name-count"> <span class="text-el">Доставка курьером</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="66">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="64"> </span> <div class="name-count"> <span class="text-el">Доставка с монтажом</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="64">Подробнее</span> <div class="frame-label"> <span class="niceRadio b_n"> <input type="radio" required name="deliveryMethodId" value="65"> </span> <div class="name-count"> <span class="text-el">Транспортной компанией</span> </div> </div> <span onclick="popupme(this); return false;" class="modal" data-type="delivery" data-target="65">Подробнее</span> </div><!--end frame-radio--> </div><!--frame-form-field--> </div><!--frame-label--> </div><!--groups-form--> <div class="groups-form" id="passport"> <div class="frame-label"> {echo ShopCore::app()->CustomFieldsHelper->setRequiredHtml('<span class="must"></span>')->setPatternMain('pattern_custom_field')->getOneCustomFieldsByName('passportSeriesNumber','order')->asHtml()} </div> </div>

@Pyramidhead so, probably, on the page only 1 input with the value 65)
@Pyramidhead, the person had a problem - he could not find the right input.
If the presence of the word break so important, then I will write it.
Only to the sense of this - if the desired input is still the last one)

Search for a tag by its attribute value and hide / display of the add. Block while radio is active

2 answers 2

More articles: