Multiple Checkboxes, check if both Checked in Jquery

Question

I have six checkboxes.

Shown as like this

Checkbox1 <input type="checkbox" id="check1">

Checkbox2 <input type="checkbox" id="check2">

<div id="checkbox1field" {if $blabla} style="display="none"{/if}> 
Checkbox1 <input type="checkbox" id="check3">
Checkbox2 <input type="checkbox" id="check4">
</div>

<div id="checkbox2field" {if $blabla2} style="display="none"{/if}>
Checkbox1 <input type="checkbox" id="check5">
Checkbox2 <input type="checkbox" id="check6">
</div>

Now if i click on checkbox with id=check1 the element with id=checkbox1field should be shown if its display="none".

If i click on id="check3" the id="check4" should be hide.

If i click on id="check4" the id="check3" should be hide.

The same process is also valid for id="checkbox2field".

But my problem is what do i do if a user clicks on

id="check2" and id="check1"

Then i want that both id="checkbox2field" and id="checkbox1field" should be shown.

What i did which works 50% is here

$("#check1:checked").show("fast").("#check4").show("fast").("#checkbox2field").hide("fast");
$("#check2:checked").show("fast").("#check1").hide("fast").("#checkbox1field").show("fast");

How can i solve this problem using jquery?

VoteyDisciple · Accepted Answer · 2010-06-10 12:53:13Z

2

Trying to do this all in one massive jQuery chain is destined to be more confusing than it's worth.

Here's a simple, direct approach:

if ($('#check1').is(':checked')) {
    if ($('#check2').is(':checked')) {
        $('#checkbox1field').show('fast');
        $('#checkbox2field').show('fast');
    } else {
        $('#checkbox1field').hide('fast');
    }
} else if ($('#check2').is(':checked')) {
    $('#checkbox2field').hide('fast');
}

answered Jun 10, 2010 at 12:53

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2010-06-10 12:56:44Z

1

$('#check1,#check2').bind('change', function () {
    var self = $(this);

    $('#' + self.attr('id') + 'field').toggle(self.attr('checked')).children(':checkbox').show();
});

$('#check3,#check4,#check5,#check6').bind('change', function () {
    var self = $(this);

    self.siblings(':checkbox').toggle(self.attr('checked'));
});

You may want to apply classes to your checkboxes, to make selection easier.

answered Jun 10, 2010 at 12:56

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Collectives™ on Stack Overflow

Multiple Checkboxes, check if both Checked in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related