Отображение div-ов при переключении радиокнопок
Здравствуйте.
Имеется список методов доставки (их 3) и методов оплаты (также 3) в корзине. Методы доставки - радиокнопки (у всех общий класс del-radio и собственные id вида delivery_id_x) - при выборе которых должны отображаться один или несколько div-блоков (их id имеют вид: payment_id_x) сделал все div скрытыми и пытаюсь делать такую проверку:
$(".del-radio").change(function() {
if ($("#delivery_id_1").prop("checked")) {
$("#payment_id_1").show();
$("#payment_id_2").hide();
$("#payment_id_3").hide();
}
else if ($("#delivery_id_2").prop("checked")) {
$("#payment_id_1").show();
$("#payment_id_2").show();
$("#payment_id_3").hide();
}
else if ($("#delivery_id_3").prop("checked")) {
$("#payment_id_1").hide();
$("#payment_id_2").hide();
$("#payment_id_3").show();
}
});
необходимо, что бы: при выборе первой радиокнопки показывался только первый div при выборе второй - первый и третий при выборе третьей - третий как исправить к рабочему состоянию? |
tarkusart,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("click", ({target}) => {
if(target = target.closest(".del-radio")) {
const hide = JSON.parse(target.dataset.hide);
document.querySelectorAll(".payment").forEach((el, i) => el.hidden = hide.includes(i))
}
})
</script>
</head>
<body>
<input name="del-radio" type="radio" class="del-radio" data-hide="[1,2]" checked >
<input name="del-radio" type="radio" class="del-radio" data-hide="[2]">
<input name="del-radio" type="radio" class="del-radio" data-hide="[0,1]">
<div class="payment" >1</div>
<div class="payment" hidden>2</div>
<div class="payment" hidden>3</div>
</body>
</html>
|
tarkusart, вам следует заменить
if ($("#delivery_id_1").prop("checked")) {
и им подобные на
if ($("#delivery_id_1").is(":checked")) {
, если вы не планируете исправить подход к описанию отображения элементов. |
Благодарю, вас Рони за помощь, всё заработало.
|
Спасибо Malleys за подсказку
|
| Часовой пояс GMT +3, время: 07:22. |