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

使用通配符隐藏所有<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>

注意

不需要多朋友$(document).ready(function(){。
ID必须是唯一的。

Answer 2

您需要将{{1}划分为hide 2nd和3rd，然后当用户更改其他按钮然后根据{{1}显示div和rest div将如以下摘要所示CSS。

ID

ID

hide

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>

单选按钮在选择时显示div，但在选择其他单选按钮后未隐藏

3 个答案: