チェックボックスのチェックボックスに基づいて同じクラスの入力ボックスに値を入れます。

Question

クラスが同じ異なる入力ボックスにチェックボックスの値を入れる方法。チェックされたチェックボックスの値は、同じクラスのすべての入力ボックスの値になります。私は最初にチェックされたチェックボックスに従って入力ボックスに値を入れる必要があります。例えば

：

私は別のチェックボックスをオンにしたときに、それは価値が次の入力に入れられますです、その値は、第1の入力ボックスになり、私は7つのチェックボックスを持っていると私は第二のチェックボックスをチェック同じクラスのボックスなどがあります。

JSFIDDLE：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

あなたはこのように、indiviually選択されたインデックスに基づいて、各入力を設定する必要があります。

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>