单选按钮在选择时显示 div，但在选择不同的单选按钮后不隐藏

Question

我想根据收音机选择显示三个 div。 我已经编写了下面的脚本，但我遇到的问题是在选择不同的单选按钮后 div 没有隐藏。 我正在使用 ucalc，因此我无法更改 div 或单选按钮的类名或 ID，因此必须使用它。

请注意，当表单加载时会自动选择单选按钮，因此需要最初显示第一个 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

使用通配符隐藏所有以grid- on radio change 开头的<div> 。

 $("[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. ID 必须是唯一的。

Answer 2

您需要通过CSS hide 2nd和3rd div，当用户更改其他按钮时，然后找到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 3

我正在使用 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>