選中一個復選框后如何刪除其他復選框上的復選框

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