选择下拉列表值，该复选框选中并填写输入

Question

期望的行为：

1。为 field1

选择“ sweets”

1. the将预先检查与预先选择的 field1
具有相同值的值
2. 如果选中此复选框，则应触发输入字段以打印输出 被检查的字符串 例如如果选中值“ a”，则应在输入中显示“ a”
3. 如果在 field1 中选中了“ sweets”，则 field3 将填充值

除第3项外，我一切正常。除非我自己检查这些项目，否则它们将显示在输入中。 我无法对其中的任何值进行硬编码，因为这些值将被动态引入。

下面我有一个工作示例：

https://jsfiddle.net/kfb4nc03

document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].checked = boxes[i].value == this.value;

    $checks = $(":checkbox");
    $checks.on('change', function() {
      var string = $checks.filter(":checked").map(function(i, v) {
        return this.value;
      }).get().join(" ,");
      $('#field_results').val(string);
    });


    document.getElementById("field3").value = this.value;
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Answer 1

您需要将复选框的事件处理程序与下拉列表的事件处理程序分开。此外，您应该尝试坚持使用jquery或不使用jquery。

var $checks = $(":checkbox");

document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].checked = boxes[i].value == this.value;
    $checks.change();
    document.getElementById("field3").value = this.value;
  }
};

$checks.on('change', function() {
  var string = $checks.filter(":checked").map(function(i, v) {
    return this.value;
  }).get().join(" ,");
  $('#field_results').val(string);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Answer 2

您需要的是这个

return $(this).next('label').text();

您有两个问题

1）您的oncheck事件应该不在活动事件之外

2）您的标签位于复选框之外，因此，如果要获取其文本，则需要使用next或closest。

document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].checked = boxes[i].value == this.value;   

    document.getElementById("field3").value = this.value;
  }
};

 $(":checkbox").on('change', function() {    
      var string = $(":checkbox").filter(":checked").map(function(i, v) {
        return $(this).next('label').text();
      }).get().join(" ,");
      $('#field_results').val(string);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Answer 3

此功能需要移至变更事件$checks.on('change', function() {})，如果要显示a，b，c，则选中的值仍然不起作用，请更改为this.id而不是this.value ，d。

document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].checked = boxes[i].value == this.value;

    $checks = $(":checkbox");
    $checks.on('change', function() {
      
    });

    var string = $checks.filter(":checked").map(function(i, v) {
        return $(this).next("label").html();
        //return this.id;
      }).get().join(" ,");
      
      $('#field_results').val(string);

    document.getElementById("field3").value = this.value;
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>