Переключатель показывает div при выборе, но не скрывается после выбора другого переключателя

Question

У меня есть три деления, которые я хочу показать на основе выбора радио. Я написал скрипт ниже, но проблема, с которой я столкнулся, заключается в том, что div не скрывается после выбора другой радиокнопки. Я использую ucal c, поэтому я не могу изменить имена классов или идентификаторы div или переключателей, поэтому приходится работать с этим.

Обратите внимание, радио-кнопка автоматически выбирается при загрузке формы, поэтому первый div должен отображаться изначально.

Код ниже:

$(document).ready(function(){

    // First Div/Radio Button
    $('#input_radio-30-0-des').on('change', function(){ 
        var a = $(this).prop('checked');
        if(a) {
            $("#grid-40-42").show();
        } else {
            $("#grid-40-42").hide();
        }
    });

    // Second Div/Radio Button
    $("#grid-44-46").hide();
    $('#input_radio-30-1-des').on('change', function(){ 
        var a = $(this).prop('checked');
        if(a) {
            $("#grid-44-46").show();
        } else {
            $("#grid-44-46").hide();
        }
    });

    // Third Div/Radio Button
    $("#grid-46-48").hide();
    $('#input_radio-30-2-des').on('change', function(){ 
        var a = $(this).prop('checked');
        if(a) {
            $("#grid-46-48").show();
        } else {
            $("#grid-46-48").hide();
        }
    });

});

Я не очень хорошо знаком с написанием javascript (вы, вероятно, можете сказать!), поэтому было бы желательно получить пояснения к "чайникам"!

Спасибо за вашу помощь!

Answer 1

Вам нужно hide 2nd & 3rd делить на CSS, и когда пользователь меняет другую кнопку, найти ID, поэтому в соответствии с ID покажите, что div и остальные div будут hide, как показано ниже фрагмент.

$(document).ready(function(){
  $('#input_radio-30-0-des, #input_radio-30-1-des, #input_radio-30-2-des').on('change', function(){ 
    var getid = $(this).attr('id');
    if (getid=='input_radio-30-0-des') {
      $('#grid-44-46, #grid-46-48').hide()//2nd and 3rd div hide
      $("#grid-40-42").show();
    }
    if (getid=='input_radio-30-1-des') {
      $('#grid-40-42, #grid-46-48').hide()//1st and 3rd div hide
      $("#grid-44-46").show();
    }
    if (getid=='input_radio-30-2-des') {
      $('#grid-40-42, #grid-44-46').hide()//1st and 2rd div hide
      $("#grid-46-48").show();
    }
  })
});

#grid-44-46, #grid-46-48{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="radio" name="div-show-hide" id="input_radio-30-0-des" checked> Button One</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-1-des"> Button Two</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-2-des"> Button Three</label>

<div id="grid-40-42"><h2>Show - Div One</h2></div>
<div id="grid-44-46"><h2>Show - Div Two</h2></div>
<div id="grid-46-48"><h2>Show - Div Three</h2></div>

Answer 2

Я использую объект Javascript, чтобы сопоставить каждую радиокнопку с целевым div. Я предполагаю, что они скрыты по умолчанию. Просто развлекайтесь и предлагайте альтернативу нескольким чекам! Более понятный код, в котором вы можете легко настроить все эти запутанные имена ...

$( document ).ready(function() {
let matches = {
  "input_radio-30-0-des": 'grid-40-42',
  "input_radio-30-1-des": 'grid-44-46',
  "input_radio-30-2-des": 'grid-46-48'
};
$(":input[name='FM']").on("change", function () {
var target= matches[$(this).attr('id')];
  $('#' +target).toggle($(this).checked);
  $("[id^=grid-]").not('#' +target).hide();
})

});

div[id*='grid-'] { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="FM" id="input_radio-30-0-des" value="0"/>  
            <label for="input_radio-30-0-des">0</label>
            <input type="radio" name="FM" id="input_radio-30-1-des" value="1"/> 
            <label for="input_radio-30-1-des">1</label>
            <input type="radio" name="FM" id="input_radio-30-2-des" value="2"/> 
            <label for="input_radio-30-2-des">2</label>
            
            <div id="grid-40-42">40-42</div>
            <div id="grid-44-46">44-46</div>
            <div id="grid-46-48">46-48</div>

Answer 3

Используйте подстановочный знак, чтобы скрыть все <div>, идентификатор которых начинается с grid- при смене радиостанции.

$("[id^=grid-]").hide();
$('#input_radio-30-0-des').on('change', function() {
  $("[id^=grid-]").hide();
  var a = $(this).prop('checked');
  if (a) {
    $("#grid-40-42").show();
  } else {
    $("#grid-40-42").hide();
  }

});

$('#input_radio-30-1-des').on('change', function() {
  $("[id^=grid-]").hide();
  var a = $(this).prop('checked');
  if (a) {
    $("#grid-44-46").show();
  } else {
    $("#grid-44-46").hide();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='input_radio-30-0-des' name="group1" />
<div id='grid-40-42'>grid-40-42</div>
<input type='radio' id='input_radio-30-1-des' name="group1" />
<div id='grid-44-46'>grid-40-46</div>

Примечание

1. Нет необходимости мультипал $(document).ready(function(){.

2. Идентификатор должен быть уникальным.