如果第一个隐藏字段有内容，则将复选框的值添加到另一个隐藏输入字段中。

Question

我有一个由4个复选框组成的组。

当选中其中任意两个时，它们的值会被复制到两个隐藏的输入字段中。

第一个选中的复选框的值将被放入第一个输入框id="checkedBox1"

如何将第二个选中的复选框值放入第二个隐藏的输入字段id="checkedBox2"

我使用下面的JavaScript函数将每个单独复选框中的值放入各自的输入框，但不知道如何遍历所有四个复选框的列表，并将选中的两个放入各自的输入框中。

复选框：

<input type="checkbox" value="test1" id="a" name="one"><label>Test11</label>
<input type="checkbox" value="test2" id="b" name="one"><label>Test12</label>
<input type="checkbox" value="test3" id="c" name="one"><label>Test13</label>
<input type="checkbox" value="test4" id="d" name="one"><label>Test14</label>

  <input type="hidden" value="" id="checkedBox1">
  <input type="hidden" value="" id="checkedBox2">

<script>
function populate() {
  var checkboxes = document.getElementsByName('one');
  var ip1 = document.getElementById('checkedBox1');
  var ip2 = document.getElementById('checkedBox2');

  // clear current values
  ip1.value = ip2.value = '';

  var first = false;
  var second = false;

  // Loop over checkboxes,stop when found 2 that are checked
  for (var i=0,iLen=checkboxes.length; i<iLen || !(first && second); i++) {

  if (checkboxes[i].checked) {

  if (!first) {
    ip1.value = checkboxes[i].value;
    first = true;

  } else if (!second) {
    ip2.value = checkboxes[i].value;
    second = true;
  }
  }
  }
  }

 $('input[type="checkbox"]').on('change', function() {
 populate();
 }).change();
 </script>

- Twobears

Answer 1

你可以尝试使用纯JS，但我建议使用表单属性访问而不是getElementsByName或getElementById：

function populate() {
  var checkboxes = document.getElementsByName('one');
  var ip1 = document.getElementById('checkedBox1');
  var ip2 = document.getElementById('checkedBox2');

  // clear current values
  ip1.value = ip2.value = '';

  var first = false;
  var second = false;

  // Loop over checkboxes,stop when found 2 that are checked
  for (var i=0,iLen=checkboxes.length; i<iLen || !(first && second); i++) {

    if (checkboxes[i].checked) {

      if (!first) {
        ip1.value = checkboxes[i].value;
        first = true;

      } else if (!second) {
        ip2.value = checkboxes[i].value;
        second = true;
      }
    }
  }
}

编辑

感谢Mal，我增加了一行代码，以便每次清除隐藏输入框的值。

- RobG

---

如果您在第一次选择复选框时勾选正确，那么这个程序将工作得很好。但是，如果您在未刷新页面的情况下取消选择和重新选择新值，则first和second会混淆。 - Mal

感谢Rob和Mal的帮助。我已经根据上面编辑过的OP代码，在我的实际版本中使其正常工作了。完美无缺。再次感谢。 - Twobears