Question

下面是我的jquery代码，我怎么能改变它，以便我不重复相同的代码，因为变量正在改变？它适用于使用hide / show的多个单选按钮。

我的单选按钮有一个班级"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 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');
      });

Answer 1

首先，对于两个以上的元素，您不能拥有相同的id：

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

id匹配。但是你需要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

Answer 2

要减少您编写的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>

jquery多个单选按钮

2 个答案: