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.
精彩评论