i have a form and i contains some checkboxes. When a checkbox is selected a div open and in that div there are some text fields. What i need to is when a check box is selected i need to alert textfield values in that particular div when a form is submitted. i have many checkboxes and need to apply this validation on all of them. A customer can select one or can select more than one checkboxes it works like this [![enter image description here][1]][1] [![enter image description here][2]][2].i have reduced the code so that if i get the answer i will modify it according to the code afterwards here is the code
Html
<div class="step">
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Building cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option" id="check1" value="Building cleaning">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Office Cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option" id="check2" value="Office Cleaning">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Resturant & Kitchen Cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option" id="check3" value="Resturant & Kitchen Cleaning">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Hotal Cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option" id="check4" value="Hotal Cleaning">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
</div>
<div class="roc-none" style="display:none">
<div class="col-md-12"><h4>Office Cleaning</h4></div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>General Cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option_8" id="option_8" value="Yes">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Deep Cleaning</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option_9" id="option_9" value="Yes">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Measurment </label>
<input type="text" class="form-control" id="measurment1" name="measurment1" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Description </label>
<input type="text" class="form-control" id="description1" name="description1"/>
</div>
</div>
<div class="clear"></div>
<hr>
</div>
<h2 class="rkc-none" style="display:none">Resturant & Kitchen Cleaning</h2>
<div class="rkc-none" style="display:none">
<div class="col-md-12"><h4>Resturant & Kitchen Cleaning</h4></div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Interior</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option_10" id="option_10" value="Yes">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>Exterior</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option_11" id="option_11" value="Yes">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group options">
<strong>W/Facade</strong>
<label class="switch-light switch-ios pull-right">
<input type="checkbox" name="option_12" id="option_12" value="Yes">
<span>
<span>No</span>
<span>Yes</span>
</span>
<a></a>
</label>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Description </label>
<input type="text" class="form-control" id="description2" />
</div>
</div>
<div class="clear"></div>
<hr>
</div>
this code shows me which option use selected
Javascript
var selectbox = [];
var chck = $("input[name='option']:checked");
if ( chck.length === 0) {
bl= true;
alert("Select at least one requirment")
}
else
{
for(var i=0; i<chck.length; i++) {
selectbox.push(chck[i].value);
}
alert(selectbox)
}
[1]: http://ift.tt/2uEKn5t
[2]: http://ift.tt/2u5EDER
Aucun commentaire:
Enregistrer un commentaire