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

Question

when i click on one checkbox I want to remove the other checkboxes if they are checked using jquery. Here is my code

  <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>

and my 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:
    }
  });

I have also tried , can someone show me how to do it.

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

full code here jfiddle

Answer 1

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

Answer 2

Use radio buttons for this interface, not checkboxes. They implement this behavior automatically for groups of radio buttons which share the same 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);
});