jquery多个单选按钮

下面是我的jQuery代码，我如何更改它，以便我不重复相同的代码，因为变量正在改变？它用于使用隐藏/显示的多个单选按钮。jquery多个单选按钮

我的单选按钮有一个类"someclass"：

<input class="someclass" id="different1" type="radio" value="Yes" /> <input class="someclass" id="different1" type="radio" value="No" /> 
    <input class="someclass" id="different2" type="radio" value="Yes" /><input class="someclass" id="different2" type="radio" value="No" /> 
    <input class="someclass" id="different3" type="radio" value="Yes" /><input class="someclass" id="different3" type="radio" value="No" />

我的div都有相同的类：

<div class="divclass" style="display:none" id="notthesame1"></div> 
<div class="divclass" style="display:none" id="notthesame2"></div> 
<div class="divclass" style="display:none" id="notthesame3"></div> 

$("input[name='different1']").click(function() { 
      $('#notthesame1').css('display', ($(this).val() === 'Yes') ? 'block' : 'none'); 
     }); 

     $("input[name='different2']").click(function() { 
      $('#notthesame2').css('display', ($(this).val() === 'Yes') ? 'block' : 'none'); 
     }); 

     $("input[name='different2']").click(function() { 
      $('#notthesame2').css('display', ($(this).val() === 'Yes') ? 'block' : 'none'); 
     });

来源

2015-12-03 NULL

'name'属性应该是相同的才能组选项。 –

首先，你不能有相同的id超过两个元素：

<input class="someclass" id="different1" type="radio" value="Yes" /> 
<input class="someclass" id="different1" type="radio" value="No" />

id s matc H。但你需要有name是一样的。因此请将其更改为：

<input class="someclass" name="different1" type="radio" value="Yes" /> 
<input class="someclass" name="different1" type="radio" value="No" />

使用data-*属性可使您的任务变得轻松。或者，给出相同class作为id到<div>：

<input class="someclass" name="different1" type="radio" value="Yes" /> 
<input class="someclass" name="different1" type="radio" value="No" />

我的解决方案，你会是这样的：

<input class="tab-input" name="tab1" type="radio" value="Yes" /> 
<input class="tab-input" name="tab1" type="radio" value="No" /> 
<div class="tab" id="tab1"></div>

而且在JavaScript：

$(function() { 
    $(".tab-input").change(function() { 
     if ($(this).val() == "Yes") 
      $("#" + $(this).attr("name")).show(); 
     else 
      $("#" + $(this).attr("name")).hide(); 
    }); 
});

小提琴：http://output.jsbin.com/xuyodirudu

来源

2015-12-03 19:20:32

但我试过这个，它隐藏/显示单选按钮而不是实际的div。 – NULL

@Menew你能分享一个小提琴吗？我确定，你没有正确复制它！ '：）' –

我做了，顺便说一句，c＃mvc radiobuttonFor是一个添加所有额外的ID不是我。 – NULL

为了减少你写的jQuery的数量，你可以尝试使用事件委托并将你的输入封装在父元素中。

编辑：忘记我对id所说的话，以前是不好的建议，对输入信息是不同的。

<div id="radioboxes"> 
    <input type="radio" class="radio" value="yes"> 
    <input type="radio" class="radio" value="no"> 
    <input type="radio" class="radio" value="yes"> 
    <input type="radio" class="radio" value="no"> 
    <input type="radio" class="radio" value="yes"> 
    <input type="radio" class="radio" value="no"> 
</div> 

<script> 
    $('#radioboxes').on("click", "input", function() { 
    var radio = $(this); 
    radio.css('display', (radio.val() === 'Yes') ? 'block', 'none'); 
    }) 
</script>

来源

2015-12-03 19:34:51 Duncan

c＃mvc“radiobuttonFor”是分配所有的id，而不是我。 – NULL

jquery多个单选按钮

回答

相关问题