Скрыть показать блоки при выборе радиокнопок
Здравствуйте!
Имею вот такую HTML-структуру: <div class='tpl-block-order-payment'> <div class="tpl-block-order-payment-method"> <div class="form-group"> <label> <input type='radio' name='PaymentMethod' value='1' checked/> <span class="tpl-property-payment-method=name">По квитанции Сбербанка</span> </label> <div class="tpl-property-payment-method-description">Текст описания оплаты по кливтанции <div style="display:none"><a href="">Скачать бланк</a></div> </div> </div> </div> <div class="tpl-block-order-payment-method"> <div class="form-group"> <label> <input type='radio' name='PaymentMethod' value='2' /> <span class="tpl-property-payment-method=name">Безналичный расчёт по счёту для юр.лиц</span> </label> <div class="tpl-property-payment-method-description">Текст описания оплаты по счёту <div style="display:none">Загрузите файл с реквизитами <input type="file" name="rekvizity" id="rekvizity"/> </div> </div> </div> </div> </div> Хочу сделать так, чтобы при выборе радиокнопки показывался скрытый блок, который относится к данной радиокнопке (если он есть). При клике по другой радиокнопке прежний блок скрывается, а соответсвующий выбранной радиокнопке показывается. На просторах инета нашёл, и немного подправил, вот такой код <script> window.onload = function() { var divs = document.querySelectorAll('label + div'), inp = document.querySelectorAll('[name="PaymentMethod"]'), fn = function(input) { input.onclick = function() { Array.prototype.forEach.call(divs, function(div, i) { div.style.display = inp[i].checked ? "block" : "none" }) } }; Array.prototype.forEach.call(inp, fn); } </script> В результате получилось что скрываются и отображаются блоки с классом tpl-property-payment-method-description - соответственно скрываются и тексты описания, а нужно чтобы тексты описания оставались, а при выборе первой радиокнопки - показывалась ссылка "Скачать бланк", а при выборе второй - показывалось поле "Загрузить файл с реквизитами". в <input type='radio' name='PaymentMethod' value='1'> и в <input type='radio' name='PaymentMethod' value='2'> внести изменения (добавить свои классы, айдишники, онклики или ещё чего-нибудь) нет возможности. Помогите, пожалуйста. В JS совсем новичок. Спасибо! |
Часовой пояс GMT +3, время: 02:22. |