Question

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

DateTime

$('[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);
});

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>

选中两个绑定复选框时显示重复的值

1 个答案: