display duplicate values when checked two binding checkbox

Question

my two synchronized checkbox displayed duplicate values when checked, how to fix it? I just want to show one single value of each checkbox see the demo http://jsfiddle.net/HvKmE/1127/ seems need more words to ask a question...

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

Firstly note that you don't need to two separate change event handlers. They both point to the same elements, so you can combine them.

Secondly, your HTML is invalid as you cannot have a td element as a child of a div. It need to be contained within a table, tbody, then tr. The p element also needs to be moved outside of that table. You should also wrap the checkboxes and their associated text nodes in label elements to increase their hit area as a courtesy to your users.

To fix the issue of duplicate values appearing, simply make the :checkbox selector more specific; restrict it to the #CS-popup element for example:

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

Here's a full working example with the JS and HTML corrected:

$(':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>