Question

我想在div中显示选中的复选框的所有值这是我的代码，如何使它变为多功能？

$('[type="checkbox"]').on('change', function() {
    var val = this.checked ? this.value : '';
    $('#cs-input').html(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
      <div id="CS-popup" class="popup-windows ">
      <input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX">GMSC01
      <input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX">GMSC02
      <input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX">VMSC01
      <br>
      <input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX">VMSC02
      <input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX">GMGW01
      <input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX">GMGW02
      <br>
      <input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX">VMGW01
      <input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX">VMGW02
      <input type="checkbox" name="CS" value="SPS01"  data-selector="SPS01BOX">SPS01
      <br>
      <input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX">SPS02
      <input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX">HSS01
      <input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX">HSS02
      <br>
      </div>

http://jsfiddle.net/Wy22s/1348/

Answer 1

您当前的逻辑仅读取最后单击的复选框的值。相反，您可以使用map()构建所有检查值的数组，然后将join()生成的数组一起作为要显示的字符串，如下所示：

$(':checkbox').on('change', function() {
  var values = $(':checkbox:checked').map(function() {
    return this.value;
  }).get().join(', ');
  $('#cs-input').html(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
  <label>
    <input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX" />GMSC01
  </label>
  <label>
   <input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX" />GMSC02
  </label>
  <label>
   <input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX" />VMSC01
  </label><br />
  
  <label>
   <input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX" />VMSC02
  </label>
  <label>
   <input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX" />GMGW01
  </label>
  <label>
    <input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX" />GMGW02
  </label><br />
  
  <label>
   <input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX" />VMGW01
  </label>
  <label>
  <input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX" />VMGW02
  </label>
  <label>
  <input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX" />SPS01
  </label><br />

  <label>
   <input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX" />SPS02
  </label>
  <label>
    <input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX" />HSS01
  </label>
  <label>
    <input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX" />HSS02
  </label><br />
</div>

请注意在处理程序中使用:checkbox和[type="checkbox"]上的:checked选择器来仅检索已选择的选择器。

还请注意，增加了label元素，以使每个复选框的点击区域包括其旁边的文本。

获取复选框值到div html

1 个答案: