Uncheck checkbox 1 when checkbox 2 is checked
I have a pretty simple question - I'm thinking - but I cannot solve it myself.
I have two checkboxes: One with value Yes, the other with value No.
I need a script of some sort to help me uncheck one 开发者_如何学Gowhen the other is checked. So if I check checkbox no. 1 - checkbox no. 2 automatically gets unchecked - and vice versa. One of the checkboxes - and only one - must always be checked. And no - i cannot use radio buttons in this case.
Would be great if it could be done i jQuery - but any help would do :)
Thanks in advance
Robert
The easiest way that I could think of to do this is with the following:
$('input:checkbox').change(
function(){
var group = this.name;
$(this).siblings('input:checkbox[name="'+ group + '"][checked]').removeProp('checked');
});
JS Fiddle demo.
However there are some caveats, the above uses removeProp()
, which is limited to jQuery 1.6 (and above, presumably). Prior to 1.6, it should be possible to substitute removeAttr('checked')
instead.
Please, though, reconsider using <input type="radio" />
elements, this is precisely what they're designed to handle and work with.
Edited following comment from Robert (in comments, below):
I got this working as planned, BUT...in my form I have another group of checkboxes, and they get the restriction as well, although they have completely different names. But I need the user to be able to pick more than one of these checkboxes. It seems as though the script affects all checkbox groups. I actually thought that by putting in name="'+ group +'" one would limit the function to those checkboxes with a name starting with the word "group". But that seems not to be the case.
The selector that assigns the change
event-handler is $('input:checkbox')
which selects/applies to all checkboxes on the page.
To apply it to only those checkboxes in a particular group, you could use:
$('input:checkbox[name="checkboxGroupName"]').change(
function(){
$(this).siblings().removeProp('checked');
});
References:
:checkbox
.change()
.siblings()
.- attribute-equals selector.
removeProp()
.
$("#checkbox1").bind('click', function(){ $("#checkbox2").removeAttr('checked'); });
$("#checkbox2").bind('click', function(){ $("#checkbox1").removeAttr('checked'); });
$('#checkbox_1').change(function() {
if ($(this).is(':checked')) {
$('#checkbox_2').prop('checked', false);
}
else {
$('#checkbox_1').prop('checked', false);
$('#checkbox_2').prop('checked', true);
}
});
$('#checkbox_2').change(function() {
if ($(this).is(':checked')) {
$('#checkbox_1').prop('checked', false);
}
else {
$('#checkbox_2').prop('checked', false);
$('#checkbox_1').prop('checked', true);
}
});
Edit: That should work now :-)
function ChkBoxClicked() {
$("#chkBoxList_0").bind('click', function () { $("#chkBoxList_1").removeAttr('checked'); });
$("#chkBoxList_1").bind('click', function () { $("#chkBoxList_0").removeAttr('checked'); });
if (($('#chkBoxList_0').is(':checked')) || ($('#chkBoxList_1').is(':checked'))) {
if ($('#chkBoxList_0').is(':checked')) { alert('chkBoxList_0'); return false; }
if ($('#chkBoxList_1').is(':checked')) { alert('chkBoxList_1'); return false; }
} else {
alert('non of the chkBoxList'); return false;
}
}
This is how I did it
$( document ).ready(function() {
$( ".checkbox1" ).click(function(event) {
$(this).parents('tr').children('td').children('.todos').prop('checked', false);
});
$( ".checkbox2" ).click(function(event) {
$(this).parents('tr').children('td').children('.checkbox1').prop('checked', false);
});
This basically states that when checkbox1 is checked, and the user attempts to check checkbox2, checkbox1 will be unchecked.
精彩评论