I have html items, 4 example:
Checkbox
-
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.