如何检查页面加载时是否选中了复选框，如果选中，则显示表单？
[英]how to check if a checkbox is checked on page load, and if it does,then show a form?
问题描述
I am trying to show() a form if the checkbox is checked when the page load. 
我正在尝试show()表单，如果页面加载时该复选框已选中。 Currently, my checkbox does show that is checked when I refresh the page. 目前，我的复选框的确显示刷新页面时已选中。 But, it doesn't show the form until you click twice, so if you click on the checkbox once it does uncheck it, then click one more time and the checkbox is checked and show the form. 但是，它只有在您单击两次后才会显示该form ，因此，如果在未选中它的情况下单击该复选框，则再单击一次就会选中该复选框并显示该表单。
Another issue is that I have 5 checkbox ID and 5 form classes and so I have 5 function doing the same thing. 另一个问题是我有5个复选框ID和5个表单类，因此我有5个函数做同样的事情。 My question is, how can I make one function to work with 5 different ID? 我的问题是，如何使一个函数可以使用5个不同的ID？
So, there are two question in one: 因此，有两个问题合而为一：
1)How to display the form is the checkbox is checked 1）如何显示表格被选中的复选框
2)How to convert my 5 functions into one function that does show the form depending on the ID passed. 2）如何将我的5个函数转换为一个函数，该函数根据传递的ID确实显示表格。
PS: I have PS：我有
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/setting.js"></script>
inside <head> 内<head>
Here is the HTML (NOTE: I will post only one div with one ID) 这是HTML（注意：我将只发布一个ID为1的div ）
//This is the checkbox
<div class="col-sm-6">
<div class="form-group">
<label class="switch">
<input name="on_off" checked type="checkbox" id="bc1" class="switch-input on-off">
<span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span>
</label>
</div>
</div>
//this is the form
<form class="form-horizontal bc-details1" method="post" action="programs-controller.php" style="display:none" role="form">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label" >Start Date:</label>
<div class="input-width input-group date col-sm-10 date-picker">
<input placeholder="MM/DD/YYYY" type="text" style="height:30px; font-size:14px" class="form-control " name="start_date" />
<span class="input-group-addon" ><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</form>
setting.js setting.js
$(document).ready(function(){
$('#bc1').change(function () {
if (this.checked) {
$('form.bc-details1').show();
}
else {
$('form.bc-details1').hide();
}
});
$('#bc2').change(function () {
if (this.checked) {
$('form.bc-details2').show();
}
else {
$('form.bc-details2').hide();
}
});
$('#bc3').change(function () {
if (this.checked) {
$('form.bc-details3').show();
}
else {
$('form.bc-details3').hide();
}
});
$('form.bc4').change(function () {
if (this.checked) {
$('form.bc-details4').show();
}
else {
$('form.bc-details4').hide();
}
});
$('#bc5').change(function () {
if (this.checked) {
$('form.bc-details5').show();
}
else {
$('form.bc-details5').hide();
}
});
});
EDIT: my forms are using classes and not ID...However, they have to use different id or class because they have different input and values 编辑：我的表单使用的是类而不是ID ...但是，它们必须使用不同的ID或类，因为它们具有不同的输入和值
1 个解决方案
解决方案1
2 已采纳 2016-03-30 14:52:31
Try to call is(':checked') in document ready: 尝试在准备就绪的文档中调用is(':checked') ：
$(document).ready(function() {
if ($('#bc').is(':checked')) {
$('form.bc-details1').show();
} else {
$('form.bc-details1').hide();
}
});
and to have one function for different id use this: 并具有一个用于不同id的函数，请使用以下命令：
$('input[type=checkbox]').change(function() {
var num = $(this).attr('id').match(/bc([0-9]+)/)[1];
if (this.checked) {
$('form.bc-details' + num).show();
} else {
$('form.bc-details' + num).hide();
}
});
and use same trick for document ready: 并使用相同的技巧准备文档：
$(document).ready(function() {
function check() {
var $checkbox = $(this);
var num = $checkbox.attr('id').match(/bc([0-9]+)/)[1];
if ($checkbox.is(':checked')) {
$('form.bc-details' + num).show();
} else {
$('form.bc-details' + num).hide();
}
}
$('input[type=checkbox]').each(check).change(check);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.