<!DOCTYPE html>
<html>
<head>
this is the jquery aspect'
<script>
$(document).ready(function() {
$(".check").click(function() {
$(this).toggleClass('start');
$(this).toggleClass('check');
this is to add class "checking" to all previous checkbox input
if ($(this).prop('checked') === true) {
$("input.start").prevUntil('input.stop').toggleClass('checking');
$(this).val(1);
}
else {
$(this).prop('checked', false);
$(this).addClass('check');
$(this).val(0);
}
this is to get values of the checkbox input that were a class of "checking"
var list = document.getElementsByClassName("checking");
for (var i = 0; i < list.length; i++) {
alert($(list[i]).val());
}
});
});
this is the html part
<body>
<div class="col-sm-4" style="text-align: center; display: block;">
Contact Section Forms
<br>
<div class="col-md-3" style="display: inline-block;">
<label>SCSF 1</label>
<input value="0" type="hidden" name="scsf_i">
<input class="form-control form-control-user check stop" value="0" type="checkbox" name="scsf_i">
</div>
for instance, if i run the code, the checking rather added as a class to the label
<div class="col-md-3" style="display: inline-block;">
<label>SCSF 2</label>
<input value="0" type="hidden" name="scsf_ii">
<input class="form-control form-control-user check" value="0" type="checkbox" name="scsf_ii">
</div>
<div class="col-md-3" style="display: inline-block;">
<label>SCSF 3</label>
<input value="0" type="hidden" name="scsf_iii">
<input class="form-control form-control-user check" value="0" type="checkbox" name="scsf_iii">
</div>
</div>
<div class="col-sm-4" style="text-align: center; display: block;">
Other Documents
<br>
<div class="col-md-3" style="display: inline-block;">
<label>Form A</label>
<input value="0" type="hidden" name="form_a">
<input class="form-control form-control-user check" value="0" type="checkbox" name="form_a">
</div>
<div class="col-md-3" style="display: inline-block;">
<label>Ungraded</label>
<input value="0" type="hidden" name="ungraded_i">
<input class="form-control form-control-user check" value="0" type="checkbox" name="ungraded_i">
</div>
<div class="col-md-3" style="display: inline-block;">
<label>Graded</label>
<input value="0" type="hidden" name="graded_i">
<input class="form-control form-control-user check" value="0" type="checkbox" name="graded_i">
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire