CODEWITHSUNDEEP
jquerycheckboxcheckedunchecked
Robert
Robert

Reputation: 21

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 when 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

Upvotes: 2

Views: 7202

Answers (5)

Pearl
Pearl

Reputation: 39

$( 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.

Upvotes: 0

Istvan
Istvan

Reputation: 133

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 3

Thorsten
Thorsten

Reputation: 5644

    $('#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 :-)

Upvotes: 1

genesis
genesis

Reputation: 50976

$("#checkbox1").bind('click', function(){ $("#checkbox2").removeAttr('checked'); });
$("#checkbox2").bind('click', function(){ $("#checkbox1").removeAttr('checked'); });

Upvotes: 2

Related Questions