jQuery. How to uncheck all checkboxes except one (which was checked)
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"> Eaglesoft</label><br>
<input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix"> Dentrix</label><br>
<input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent"> Soft-Dent</label><br>
<input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon"> Denticon</label><br>
<input type="checkbox" id="worker-soft-other"><label for="worker-soft-other"> Other</label><br>
<input type="checkbox" id="worker-soft-none" value="none">
<label for="worker-soft-none"> No Software Experience - Paper Records Only</label><br>
</div>
Another solution
$('.foo').click(function(){
$('.foo').not(this).attr('checked', false);
});
jQuery V: 1.6 =<
$( ".foo" ).change(function() {
$('.foo').not(this).prop('checked', false);
});
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.