[英]Show/Hide DIV by Multiple Checkboxes
我试图在div中显示/隐藏一个表单，条件是多个复选框。 如果选中全部3，则应显示div内容。 如果取消选中一个或多个，则应隐藏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>
您当前正在检查是否已选中任何复选框。 确保他们都被检查过。
if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked') && $('#checkbox3').is(':checked'))
$(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();
});
$(function(){
var $cbx = $(':checkbox[id^=check]'),
$form = $('#purchaseForm');
$cbx.change(function(){
$form[$cbx.not(':checked')[0]?'hide':'show']();
}).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();
}
});
});
尝试
jQuery(function(){
var checks = $('#checkbox1, #checkbox2, #checkbox3');
checks.click(function(){
if (checks.filter(':checked').length == checks.length) {
$('#purchaseForm').show();
} else {
$('#purchaseForm').hide();
}
}).triggerHandler('click')
})
演示： 小提琴
显示/隐藏多个div并禁用带有多个复选框的隐藏输入JavaScript
[英]Show / Hide multiple div and disable hidden input with multiple checkboxes JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.