显示和隐藏动态DIV

单击单选按钮时如何显示和隐藏下面的DIV？显示和隐藏动态DIV

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" id=radio1_1" name="radio_1" value="1">Yes</label> 
    <label><input type="radio" id=radio1_2" name="radio_1" value="2">Yes</label> 
    </div> 

    <div id="yes_wrap_1" style="display:none">test1</div> 
    <div id="no_wrap_1" style="display:none">test2</div> 

    <div><label><input type="radio" id=radio2_1" name="radio_2" value="1">Yes</label> 
    <label><input type="radio" id=radio2_2" name="radio_2" value="2">Yes</label> 
    </div> 

    <div id="yes_wrap_2" style="display:none">test1</div> 
    <div id="no_wrap_2" style="display:none">test2</div> 

    --------------- 


     ---------- 
    <input type="submit" value="Submit"> 
</form>

这里我硬编码的第一个单选按钮点击，并试图隐藏和显示的DIV的第一集团。但我有相同的结构动态生成10个单选按钮组和10个DIV组。我想使用相同的功能来处理其他单选按钮组。你可以让我知道如何做到这一点？谢谢。

$(document).ready(function(){ 
    $("input[name$='radio_1']").click(function() { 
     if ($(this).val() === '1') 
     {  
      $("#yes_wrap_1").show(); 
      $("#no_wrap_1").hide(); 
     } 
     else if ($(this).val() === '2') 
     {  
      $("#yes_wrap_1").hide(); 
      $("#no_wrap_1").show(); 
     } 
    }); 
});

来源

2011-11-18 nav100

你怎么样添加一个类的收音机，喜欢说， “开关”，和你这样做：

$("input.switch").click(function() { 
     var value = $(this).attr('id').substring(7); 
     $("#yes_wrap_" + value).show(); 
     $("#no_wrap_" + value).hide(); 
});

来源

2011-11-18 15:16:09

我alreday有一个class =“required”的单选按钮。我怎样才能使用上面的逻辑？ – nav100

你有没有得到它的工作，或者你需要进一步的帮助？ –

这将工作

变化

$("input[name$='radio_1']").click(function() {

至

$("input[type='radio']").click(function() {

Jsfiddle链接，参考

来源

2011-11-18 15:16:15 Wazzzy

+1感谢您：+1 ....请标记它是否有帮助.... – Wazzzy

如果标记是动态生成的，你可以不只是使用onclick和做类似

<div><label><input type="radio" id=radio1_1" name="radio_1" value="1" onclick="$('#yes_wrap_1').show();$('#no_wrap_1').hide();">Yes</label> 
<label><input type="radio" id=radio1_2" name="radio_1" value="2" onclick="$('#yes_wrap_1').hide();$('#no_wrap_1').show();">Yes</label> 
</div>

来源

2011-11-18 15:17:10 Danny

你的选择不会选择所有的单选按钮。尝试像这样

$("input:radio").click(function(){ 
});

来源

2011-11-18 15:18:38 ShankarSangoli

显示和隐藏动态DIV

回答

相关问题