Awhz Awhz - 7 months ago 19
Javascript Question

Check and uncheck in different td tags

I expose my problem.

I have different input type checkboxes in different td's. When I check a checkbox, I want the others unchecked.

My JavaScript function works, but only when it is in the same td although each input is in the same class...

I added a fiddle to make you see it:



Do you have a solution?

Answer

Use $('input[type="checkbox"]').not(this) to exclude current check-box. .siblings will only select siblings of each element in the set of matched elements

$(function() {
  $('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"].CheckAccre').not(this).prop('checked', false);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check-box without class:
<input type="checkbox" runat="server" id="Bloc11" value="O" />
<table>
  <tr>
    <td>
      <input type="checkbox" runat="server" id="Bloc11" value="O" class="CheckAccre" />
      <label for="<%# Bloc11.ClientID %>" class="pure-checkbox" id="Bloc1L" runat="server" style="margin: 0px;">
        Demandeur d'emploi indemnisé/indemnisable</label>
      <br />
      <input type="checkbox" value="N" runat="server" id="Bloc12" class="CheckAccre" />
      <label for="<%# Bloc12.ClientID %>" class="pure-checkbox" id="Bloc12L" runat="server" style="margin: 0px;">
        Demandeur d'emploi non indemnisé inscrit à l'ANPE six mois au cours des huit derniers mois</label>
    </td>
  </tr>
  <tr>
    <td>
      Bénéficiaire du
      <input type="checkbox" runat="server" id="RSA" value="1" class="CheckAccre" />
      <label for="<%# RSA.ClientID %>" class="pure-checkbox" id="RSAL" runat="server" style="margin: 0px;">RSA</label>
      <input type="checkbox" value="2" runat="server" id="RMI" class="CheckAccre" />
      <label for="<%# RMI.ClientID %>" class="pure-checkbox" id="RMIL" runat="server" style="margin: 0px;">RMI</label>
      <input type="checkbox" value="3" runat="server" id="ASS" class="CheckAccre" />
      <label for="<%# ASS.ClientID %>" class="pure-checkbox" id="ASSL" runat="server" style="margin: 0px;">ASS</label>
      <input type="checkbox" value="4" runat="server" id="ATA" class="CheckAccre" />
      <label for="<%# ATA.ClientID %>" class="pure-checkbox" id="ATAL" runat="server" style="margin: 0px;">ATA</label>
    </td>
  </tr>
</table>

Fiddle Demo