javascript - 如何获取所有复选框值并将每个复选框的值放入特定的文本输入

Question

我有一个带有(20)个选项和(20)个输入字段的复选框，我需要:当用户选择一个或多个选项时，将选中的复选框的值放在单独的输入字段中，否则放置(0) 我尝试了以下操作，当用户仅选择一个选项时它就起作用了。

$(".cont").change(function() {
    if($('.cont :checked').val() == "1") {
      $('#q1').val('1');
    }else{
     $('#q1').val('0');
    }
    if($('.cont :checked').val() == "2") {
      $('#q2').val('2');
    }else{
     $('#q2').val('0');
    }
    if($('.cont :checked').val() == "3") {
      $('#q1').val('3');
    }else{
     $('#q3').val('0');
    }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
      <input  type="checkbox" value="1">
      <input  type="checkbox" value="2">      
      <input  type="checkbox" value="3">
    </div>
    <input id="q1" type="text" >
    <input id="q2" type="text" >      
    <input id="q3" type="text" >

Answer 1

您可以结合使用 .val() 和 .is(':checked')。

$('#q' + $(this).val()) 将选择正确的文本输入。

$(this).is(':checked') ? $(this).val() : 0 如果选中，会将您的 checkbox 值放入输入中，如果没有选中，则 0 。

$('.cont input[type="checkbox"]').change(function() {
  $('#q' + $(this).val()).val($(this).is(':checked') ? $(this).val() : 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <input type="checkbox" value="3">
</div>
<input id="q1" type="text">
<input id="q2" type="text">
<input id="q3" type="text">