Question

单击单选按钮时，如何显示和隐藏以下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();
        }  
    }); 
});

Answer 1

这将有效

更改

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

到

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

Jsfiddle链接供参考

Answer 2

如何在无线电中添加一个类，比如说“切换”，你就这样做了：

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

Answer 3

如果动态生成标记，您不能只使用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>

Answer 4

您的选择器不会选择所有单选按钮。试试这样的事情

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

显示和隐藏动态DIV

4 个答案: