How to put the value of checked check boxes into different input box where class is the same. Right now the value of checked checkboxes can be value of all input box with the same class. I need to put value in input box according to the first checked check box.
For example:
I have the seven check box and I check the 2nd check box then its value will be in the first input box then when I check another check box it's value will be put into the next input box with the same class and so on.
JSFIDDLE : http://ift.tt/2wCJ36S
var senate = $('.senators');
var limit = 3;
$('input.single-checkbox').on('change', function (evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
senate.val(getSelectedSenators());
});
function getSelectedSenators() {
var senators = "";
$('input[type="checkbox"]').each(function (i, cb) {
if ($(this).is(":checked")) {
senators += $(this).val() + " ";
}
});
return senators;
}
<!--JQUERY-->
<script type="text/javascript" src="http://ift.tt/1N7dbW6"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="http://ift.tt/2aHTozy"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-8">
<div class="pricing-levels-3">
<p><strong>CHECK BOXES(LIMIT 3)</strong></p>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 1">Senator 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 2">Senator 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 3">Senator 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 4">Senator 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 5">Senator 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 6">Senator 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Senator 7">Senator 7<br>
</div>
</div>
<div class="col-lg-4">
<br>
<input class="senators" id="senators" placeholder="SENATORS" />
<input class="senators" id="senators1" placeholder="SENATORS" />
<input class="senators" id="senators2" placeholder="SENATORS" />
</div>
Aucun commentaire:
Enregistrer un commentaire