how to check if a checkbox is checked on page load, and if it does,then show a form?
Question
I am trying to show() a form if the checkbox is checked when the page load. 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.
Another issue is that I have 5 checkbox ID and 5 form classes and so I have 5 function doing the same thing. My question is, how can I make one function to work with 5 different ID?
So, there are two question in one:
1)How to display the form is the checkbox is checked
2)How to convert my 5 functions into one function that does show the form depending on the ID passed.
PS: I have
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/setting.js"></script>
inside <head>
Here is the HTML (NOTE: I will post only one div with one ID)
//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
$(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
1 answers
solution1
2 ACCPTED 2016-03-30 14:52:31
Try to call is(':checked') in document ready:
$(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:
$('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);
});
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.