javascript - 选中两个绑定(bind)复选框时显示重复值

Question

我的两个同步复选框在选中时显示重复值，如何解决？我只想显示每个复选框的一个值看演示 http://jsfiddle.net/HvKmE/1127/似乎需要更多的话来问一个问题......

$('[type="checkbox"]').on('change', function() {
  var selector = $(this).data('selector');
  $('[data-selector="' + selector + '"]').prop("checked", this.checked);
});
$(':checkbox').on('change', function() {
  var values = $(':checkbox:checked').map(function() {
    return this.value;
  }).get().join(',');
  $('p').html(values);
});

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

  <br>
</div>
<div>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01">
    </TD1 <TD class="col-ne col-CS">
    <INPUT name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01">
    <p></p>

Answer 1

首先请注意，您不需要两个单独的 change 事件处理程序。它们都指向相同的元素，因此您可以将它们组合起来。

其次，您的 HTML 无效，因为您不能将 td 元素作为 div 的子元素。它需要包含在 table、tbody 和 tr 中。 p 元素也需要移到该 table 之外。您还应该将复选框及其关联的文本节点包裹在 label 元素中，以增加它们的点击区域，以示对用户的礼貌。

要解决出现重复值的问题，只需使 :checkbox 选择器更具体即可；将其限制为 #CS-popup 元素，例如:

var values = $('#CS-popup :checkbox:checked').map(function() ...

这是一个完整的工作示例，已更正 JS 和 HTML:

$(':checkbox').on('change', function() {
  var selector = $(this).data('selector');
  $('[data-selector="' + selector + '"]').prop("checked", this.checked);

  var values = $('#CS-popup :checkbox:checked').map(function() {
    return this.value;
  }).get().join(',');
  $('p').html(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
  <label>
    <input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX-1" />
    GMSC01
  </label>
  <label>
    <input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1" />
    GMSC02
  </label>
  <label>
    <input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1" />
    VMSC01
  </label><br />
  <label>
    <input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">
    VMSC02
  <label>
    <input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1" />
    GMGW01
  <label>
    <input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1" />
    GMGW02
  </label><br />
  <label>
    <input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1" />
    VMGW01
  </label>
  <label>
    <input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1" />
    VMGW02
  </label>
  <label>
    <input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1" />
    SPS01
  </label><br />
</div>
<div>
  <table>
    <tbody>
      <tr>
        <td class="col-ne col-CS">
          <input name="cf_ne015" type="checkbox" data-selector="GMSC01BOX-1" value="GMSC01" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1" value="GMSC02" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1" value="VMSC01" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1" value="VMSC02" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1" value="GMGW01" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1" value="GMGW02" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1" value="VMGW01" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1" value="VMGW02" />
        </td>
        <td class="col-ne col-CS">
          <input name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1" value="SPS01" />
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p></p>