javascript - jquery 复选框获取文本输入值

Question

我有列表输入复选框

<input type="checkbox" name="id_image" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" />

<input type="text" name="id_image" value="" class="id_image_check" />

如何检查多个输入复选框我已将值显示为input type="text"as

<form>
<input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" />
</form>

Answer 1

Vanilla Javascript 有一个完美的解决方案

function attachListeners() {
  var checkboxes = document.getElementsByClassName('id_image')

  for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener('click', getAndPutValues, false);
  }
}

function getAndPutValues() {
  var result = [];
  document.querySelectorAll(".id_image:checked").forEach(function(item) { result.push(item.value);});

  document.querySelector('.id_image_check').value = result.join(', ');
}

attachListeners();