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?

Answer 1

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.