Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2020, 03:07
Новичок на форуме
Отправить личное сообщение для tarkusart Посмотреть профиль Найти все сообщения от tarkusart
 
Регистрация: 17.01.2020
Сообщений: 3

Отображение 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
при выборе второй - первый и третий
при выборе третьей - третий
как исправить к рабочему состоянию?
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2020, 03:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,826

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>
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2020, 04:18
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,531

tarkusart, вам следует заменить
if ($("#delivery_id_1").prop("checked")) {
и им подобные на
if ($("#delivery_id_1").is(":checked")) {
, если вы не планируете исправить подход к описанию отображения элементов.
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2020, 08:57
Новичок на форуме
Отправить личное сообщение для tarkusart Посмотреть профиль Найти все сообщения от tarkusart
 
Регистрация: 17.01.2020
Сообщений: 3

Благодарю, вас Рони за помощь, всё заработало.
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2020, 08:58
Новичок на форуме
Отправить личное сообщение для tarkusart Посмотреть профиль Найти все сообщения от tarkusart
 
Регистрация: 17.01.2020
Сообщений: 3

Спасибо Malleys за подсказку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить содержимое div при смене размера экрана - JavaScript Hinc Javascript под браузер 4 09.11.2016 03:54
При передаче кода fancybox в div через .load из div другого файла не всплывает модаль alanat Ваши сайты и скрипты 1 02.07.2016 01:31
Как реализовать эффект при переключении контента Quasar Общие вопросы Javascript 0 21.01.2015 05:04
При наведении на элемент появление div, положение которого постоянно меняется Poision Элементы интерфейса 5 27.01.2014 18:43
Отображение фото при наведении OnOff jQuery 2 11.04.2012 16:18