将值放入输入框中，具有基于选中复选框的相同类

Question

如何将选中复选框的值放入类相同的不同输入框中。现在，选中复选框的值可以是具有相同类的所有输入框的值。我需要根据第一个选中的复选框将值放入输入框中。

例如：

我有七个复选框，我选中第二个复选框，然后它的值将在第一个输入框中，然后当我选中另一个复选框时，它的值将被放入具有相同类的下一个输入框中，依此类推。

吉斯菲德尔 ： https://jsfiddle.net/aice09/nwqpkr0h/

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="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>

Answer 1

您必须根据所选索引单独设置每个输入，如下所示：

var senate$ = $('.senators');
var limit = senate$.length;
$('input.single-checkbox').on('change', function (evt) {
var index = $(this).siblings(':checked').length;
var value = $(this).val();
if (index >= limit) {
this.checked = false;
} else {
$(senate$[index]).val(this.checked ? value : null);
}
});

<!--JQUERY-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>