Question

我有一个表格中的多个DIV。每个DIV内部都有两个单选按钮和两个DIV。第一个单选按钮始终处于选中状态，因此一个DIV内容将被显示，而另一个隐藏。选中后，第二个单选按钮的DIV显示应该切换。

我尝试了基于https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button

的解决方案

但是当我在多个DIV中使用复选框时，无法获得所需的解决方案。谁能帮我解决这个问题。


<form>

<div id="A">
<label><input checked="checked" type="radio" name="colorRadio" value="red">1st radio button[div A]</label>
<label><input type="radio" name="colorRadio" value="green">2nd radio button[div A]</label>
<div id="1" class="red">Content in Div 1</div>
<div id="2" class="green">Content in Div 2</div>
</div>


<div id="B">
<label><input checked="checked" type="radio" name="colorRadio" value="red2">1st radio button[div B]</label>
<label><input type="radio" name="colorRadio" value="green2">2nd radio button[div B]</label>
<div id="3" class="red2">Content in Div 3</div>
<div id="4" class="green2">Content in Div 4</div>
</div>

</form>

<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
</script>

Answer 1

这里是有关如何执行此操作的示例。首先，几个指针。

（1）ID不能以数字开头，必须以字母开头

（2）在每个单选按钮组（一个组由name=xxxxx属性标识）中，只能选择一个单选按钮。因此，要么有两个单选按钮组（如我的示例），要么接受如果选择了Btn3，则不能选择Btn1。

$('input[type="radio"]').click(function(){
    var activeid = $(this).data('id');
    var div2use = $(this).closest('.bobDiv');
    var subdivs = $(this).closest('.bobDiv').find('div.box');
    $.each( subdivs, function(){
        var tst = this.id;
        if ( tst == activeid){
            $(this).addClass('myactive');
        }else{
            $(this).removeClass('myactive');
        }
    });
});

form{display:flex;}
#a, #b{flex:1;}
.box{background:pink;border:1px solid yellow;display:none;}
.myactive{display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
  <div id="a" class="bobDiv">
    <label><input data-id="a1" checked type="radio" name="colorRadio" value="red">Btn1 [div1]</label>
    <label><input data-id="a2" type="radio" name="colorRadio" value="green">Btn2 [div1]</label>
    <div id="a1" class="red box myactive">1</div>
    <div id="a2" class="green box">2</div>
  </div>
  
  <div id="b" class="bobDiv">
    <label><input data-id="a3" checked type="radio" name="colorRadio2" value="red2">Btn1 [div2]</label>
    <label><input data-id="a4" type="radio" name="colorRadio2" value="green2">Btn2 [div2]</label>
    <div id="a3" class="red2 box myactive">3</div>
    <div id="a4" class="green2 box">4</div>
  </div>

</form>

根据无线电选择显示多个DIV中切换的DIV

1 个答案: