Здравствуйте!
Имею вот такую 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 совсем новичок.
Спасибо!
