开发者

Multiple Checkboxes, check if both Checked in Jquery

开发者 https://www.devze.com 2023-01-03 04:41 出处:网络
I have six checkboxes. Shown as like this Checkbox1 <input type=\"checkbox\" id=\"check1\"> Checkbox2 <input type=\"checkbox\" id=\"check2\">

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?


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');
}


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

0

精彩评论

暂无评论...
验证码 换一张
取 消