CODEWITHSUNDEEP
javascriptjquery
Code Ninja
Code Ninja

Reputation: 163

how to remove check on other checkboxes when one checkbox is checked

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

Upvotes: 0

Views: 1910

Answers (3)

Running Buffalo
Running Buffalo

Reputation: 1323

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

Upvotes: 1

user149341
user149341

Reputation:

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>

Upvotes: 0

Nick
Nick

Reputation: 382

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

Upvotes: 0

Related Questions