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

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);
});