CODEWITHSUNDEEP
jquerycheckbox
Andry
Andry

Reputation: 665

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

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?

Upvotes: 19

Views: 32672

Answers (4)

Beefjeff
Beefjeff

Reputation: 399

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>

Upvotes: 1

Sadee
Sadee

Reputation: 3170

jQuery V: 1.6 =<

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

Upvotes: 3

Joyal
Joyal

Reputation: 2683

Another solution

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

Upvotes: 13

Adil
Adil

Reputation: 148110

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.

Upvotes: 37

Related Questions