Show/Hide DIV by Multiple Checkboxes
Question
I am trying to show/hide a form inside a div, conditional on multiple checkboxes. If all 3 are checked, the div contents should appear. If one or more are unchecked, the div contents should be hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style/bootstrap.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script>
if ($('#checkbox1, #checkbox2, #checkbox3').is(:checked)) {
$('#purchaseForm').show();
} else {
$('#purchaseForm').hide();
}
</script>
</head>
<body>
<div class="span6">
I understand that...<br>
I understand that...<br>
I understand that...<br><br>
<div id="purchaseForm">
[form]
</div>
</div>
<div class="span6">
<input name="checkbox1" id="checkbox1" value="" type="checkbox"><br>
<input name="checkbox2" id="checkbox2" value="" type="checkbox"><br>
<input name="checkbox3" id="checkbox3" value="" type="checkbox"><br>
</div>
</body>
</html>
5 answers
solution1
1 2013-08-29 03:00:40
You are currently checking to see if any of the checkboxes are checked. Make sure they're all checked.
if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked') && $('#checkbox3').is(':checked'))
solution2
1 2013-08-29 03:01:32
You can listen to the change event of checkboxes DEMO Here :
$(function(){
var container = $('#container');
var purchaseForm = $('#purchaseForm');
container.on('change', 'input[type="checkbox"]', function(){
if(container.find('input[type="checkbox"]').not(':checked').length){
purchaseForm.hide();
}
else{
purchaseForm.show();
}
});
container.find('input[type="checkbox"]:first').change();
});
solution3
1 2013-08-29 03:12:43
$(function(){
var $cbx = $(':checkbox[id^=check]'),
$form = $('#purchaseForm');
$cbx.change(function(){
$form[$cbx.not(':checked')[0]?'hide':'show']();
}).change();
});
solution4
1 2013-08-29 03:43:29
$(document).ready(function() {
var a = $("#checkbox1");
var b = $("#checkbox2");
var c = $("#checkbox3");
var combined = a.add(b).add(c);
$(combined).click(function() //anyone of combined cliecked event
{
// if ($('#checkbox1, #checkbox2, #checkbox3').is(':checked')) this means one of those is checked
if ($(a).is(':checked') && $(b).is(':checked') && $(c).is(':checked')) {
$('#purchaseForm').show();
} else {
$('#purchaseForm').hide();
}
});
});
solution5
0 ACCPTED 2013-08-29 02:59:46
Try
jQuery(function(){
var checks = $('#checkbox1, #checkbox2, #checkbox3');
checks.click(function(){
if (checks.filter(':checked').length == checks.length) {
$('#purchaseForm').show();
} else {
$('#purchaseForm').hide();
}
}).triggerHandler('click')
})
Demo: Fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show / Hide multiple div and disable hidden input with multiple checkboxes JavaScript
Show/Hide div with checkboxes using classes multiple times on a page
Show/Hide Content with multiple checkboxes
Multiple Checkboxes to Show/Hide Divs
Show / hide a specific Div with checkboxes with HTML / CSS
Jquery show/hide div if certain checkboxes are checked
Hide and show multiple div
hide / show multiple div
Hide/show multiple elements with multiple checkboxes
show one div and hide another div onclick of list of checkboxes
Related Tags