Question

当我单击一个复选框时，如果要使用jquery选中其他复选框，则要删除其他复选框。这是我的代码

  <div class="toggle-two">
    <div>Novice</div>
    <label class="switch">
      <input class="switch" value="switch-novice" type="checkbox"/>
      <span class="slider round"></span>
    </label>
  </div>

  <div class="toggle-three">
    <div>Intermediate</div>
    <label class="switch">
      <input class="switch" value="switch-intermediate"  type="checkbox" />
      <span class="slider round"></span>
    </label>
  </div>

  <div class="toggle-four">
    <div>Expert</div>
    <label class="switch">
      <input class="switch" value="switch-expert" type="checkbox" />
      <span class="slider round"></span>
    </label>
  </div>

和我的jquery

  $(".switch").change(function(e) {
    switch (e.target.value) {
      case "switch-novice":
        if (this.checked) {
          $(":checkbox[value=switch-intermediate]").removeAttr("Checked");
                    $(":checkbox[value=switch-expert]").removeAttr("Checked");
        }
        break;
      case "switch-intermediate":
        break;
      case "switch-expert":
        break;
      default:
    }
  });

我也尝试过，有人可以告诉我怎么做。

$(":checkbox[value=switch-expert]").attr('checked', false)

完整代码在这里 jfiddle

Answer 1

$(":checkbox").click(function(e) {
    $(":checkbox[value!="+$(this).attr('value')+"]").attr('checked', null);
});

Answer 2

为此接口使用单选按钮，而不是复选框。它们会为共享相同的name的单选按钮组自动实现此行为。

<label>
  <input type="radio" name="input-name" value="1">
  Option One
</label>
<br>
<label>
  <input type="radio" name="input-name" value="2">
  Option Two
</label>
<br>
<label>
  <input type="radio" name="input-name" value="3">
  Option Three
</label>

Answer 3

$(":checkbox").click(function(e) {
    $(":checkbox").prop('checked', false)
    $(e.target).prop('checked', true);
});

选中一个复选框后如何删除其他复选框上的复选框

3 个答案: