Question

我有2个切换按钮，如下所示：

＆＃13;

 $(".ui.toggle" ).on( "click", function() {

      if (!$('#thetoggle').is(':checked')) {
        $('#thetoggle').prop('checked', true );
      }
      else {
        $('#thetoggle').prop('checked', false);
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ui toggle checkbox">
      <input id="thetoggle" value="false" name="ownplace" type="checkbox">
      <label>&nbsp;</label>
    </div>
    <div class="ui toggle checkbox">
      <input id="thetoggle" value="false" name="otherplace" type="checkbox">
      <label>&nbsp;</label>
    </div>

＆＃13;

所以当我点击第二个切换时，第一个切换更改了检查状态，它不应该这样做 - 我希望它们可以独立更改。我明白为什么它不起作用，因为我没有任何选择器，因为这与第一个相同。但是，我想知道是否有办法使用某种简单的选择器来执行此操作，该选择器将来可用于所有切换，ID为thetoggle

Answer 1

id只能引用一个元素，$('#thetoggle')将始终返回带有在DOM中找到的id的第一个元素。您应该使用class代替，并在事件处理程序中使用：

$(this).find('.thetoggle`);

获取子节点。你也可以删除class和id，只使用标签类型：

var checkbox = $(this).find('input[type=checkbox]');

Answer 2

可以在没有任何javascript的情况下独立检查复选框：

＆＃13;

<div class="ui toggle checkbox">
      <input class="thetoggle" value="false" name="ownplace" type="checkbox">
      <label>&nbsp;</label>
    </div>
    <div class="ui toggle checkbox">
      <input class="thetoggle" value="false" name="otherplace" type="checkbox">
      <label>&nbsp;</label>
    </div>

＆＃13;

虽然如果你正在寻找他们的行为像单选按钮（即一次只能检查一个），你可以尝试这个（它确实将id更改为类）：

＆＃13;

$(".thetoggle").change(function() {
  $(".thetoggle").prop('checked', false);
  $(this).prop('checked', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui toggle checkbox">
  <input class="thetoggle" value="false" name="ownplace" type="checkbox">
  <label>&nbsp;</label>
</div>
<div class="ui toggle checkbox">
  <input class="thetoggle" value="false" name="otherplace" type="checkbox">
  <label>&nbsp;</label>
</div>

＆＃13;

多个jQuery切换不正确

2 个答案: