[英]Show/Hide DIV by Multiple Checkboxes
I am trying to show/hide a form inside a div, conditional on multiple checkboxes. 我试图在div中显示/隐藏一个表单,条件是多个复选框。 If all 3 are checked, the div contents should appear.
如果选中全部3,则应显示div内容。 If one or more are unchecked, the div contents should be hidden.
如果取消选中一个或多个,则应隐藏div内容。
<!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>
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'))
You can listen to the change event of checkboxes DEMO Here : 您可以在此处收听复选框DEMO的更改事件:
$(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();
});
$(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();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.