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=".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
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./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
Share Improve this question edited Mar 30, 2016 at 14:51 Maduro asked Mar 30, 2016 at 14:45 MaduroMaduro 7255 gold badges24 silver badges47 bronze badges1 Answer
Reset to default 5Try 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);
});