jQuery. How to uncheck all checkboxes except one (which was checked)

Question

I have html items, 4 example:

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

And now, I want next: If I click on any checkbox - the checkbox should be checked and other checkboxes should be unchecked. How can I do it?

What you want is called a radio button... – RRikesh Dec 06 '12 at 07:50 — RRikesh, Dec 06 '12 at 07:50
@François Wahl, no problem! I didn't know about it. – Andry Dec 06 '12 at 19:28 — Andry, Dec 06 '12 at 19:28

Adil · Accepted Answer · 2017-02-01T09:19:21.127

37

You can use radio button and group them by name attributes. If you have to do it with checkboxes then you can do it this way,

Live Demo

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

For dynamically generated html you need on that allows you to delegate the event with static parent, you can use document with you do not know static parent.

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

Document could be replaced by static parent if it is known. e.g. if div contain dynamically generated has id parentdiv then you can have

`$('#parentdiv').on('click','.foo', function(){`

Edit

Use prop instead of attr for properties checked, selected, or disabled as per documentation.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

edited Feb 01 '17 at 09:19

answered Dec 06 '12 at 07:50

Adil

146,340
25
209
204

Thank you very much for answer. I know about `radiobutton` group. But I cannot use it, because I must have different name params for my Spring MVC controller. By the reason, I've decided to use checkbox and JavaScript – Andry Dec 06 '12 at 07:54
26

+1: for working solution and DEMO. In general, a 1-liner alternative would be: `$('.foo').not(this).attr('checked', false);` – Nope Dec 06 '12 at 10:27
Thanks @FrançoisWahl, The suggested statement is very nice. – Adil Dec 06 '12 at 10:42
Guys, it doesn't work, if html has been generated dynamically by jQuey! :( What should I do in the situation? – Andry Dec 06 '12 at 20:16
You need to on for binding click event, I have updated my answer. – Adil Dec 07 '12 at 03:28
@FrançoisWahl your's answer worked as a charm. Thanks – Zaker May 10 '15 at 15:23
coming late to the party, but I miss one thing here: One of the few reasons why one would prefer a set of (exclusive) checkboxes over a radio group, is the fact that you could uncheck all of them, while with a radio group, once clicked, there is no way to revert to "none checked" state. Is there a jquery solution for that? – Cee McSharpface Apr 19 '16 at 12:33

score 13 · Answer 2 · answered Jun 13 '18 at 11:11

13

Another solution

$('.foo').click(function(){     
      $('.foo').not(this).attr('checked', false);      
});

answered Jun 13 '18 at 11:11

Joyal

2,587
3
30
45

2

this answer is very underrated – Plexis Plexis Jun 20 '18 at 11:12
If this doesn't work, try `$('.foo').not(this).prop('checked', false);` – Felipe Castillo May 03 '22 at 15:27

score 2 · Answer 3 · answered Aug 07 '18 at 16:44

2

jQuery V: 1.6 =<

$( ".foo" ).change(function() {
    $('.foo').not(this).prop('checked', false);
});

answered Aug 07 '18 at 16:44

Sadee

3,010
35
36

Beefjeff · Answer 4 · 2018-10-30T18:39:00.013

Maybe this will help you:

.siblings("input[type='checkbox']").attr("checked", true);

will select all the checkboxes except for the one that was clicked.

$("input[type=checkbox]").on("click", function() {

  if ($(this).val() == "none") {
    
    $(this).siblings("input[type=checkbox]").attr('checked', false);
    
  } else {
    
    $(this).siblings("input[value=none]").attr('checked', false);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>

jQuery. How to uncheck all checkboxes except one (which was checked)

4 Answers4

Linked