Форум

tarkusart · #1 (**permalink**) 17.01.2020, 03:07

Здравствуйте.
Имеется список методов доставки (их 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
при выборе второй - первый и третий
при выборе третьей - третий
как исправить к рабочему состоянию?

рони · #2 (**permalink**) 17.01.2020, 03:37

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>

Malleys · #3 (**permalink**) 17.01.2020, 04:18

tarkusart, вам следует заменить

if ($("#delivery_id_1").prop("checked")) {

и им подобные на

if ($("#delivery_id_1").is(":checked")) {

, если вы не планируете исправить подход к описанию отображения элементов.

tarkusart · #4 (**permalink**) 17.01.2020, 08:57

Благодарю, вас Рони за помощь, всё заработало.

tarkusart · #5 (**permalink**) 17.01.2020, 08:58

Спасибо Malleys за подсказку

Форум

Справочник

Discord чат

Курсы javascript