Question

我暴露了我的问题。

我在不同的td中有不同的输入类型复选框。当我选中一个复选框时，我希望其他人不受管理。

我的JavaScript函数有效，但只有当它在同一个td中时，尽管每个输入都在同一个类中......

我添加了一个小提琴，让你看到它：

1

你有解决方案吗？

Answer 1

使用$('input[type="checkbox"]').not(this)排除当前复选框。 .siblings只会选择匹配元素集中每个元素的兄弟姐妹

＆＃13;

$(function() {
  $('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"].CheckAccre').not(this).prop('checked', false);
  });
})

＆＃13;

<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>

＆＃13;

Fiddle Demo

修改：要使用 jQuery.fn.extend() 实现相同目标，请在处理程序中使用this，因为this将只是jQuery-object {1}} extended-instance被调用。

＆＃13;

jQuery.fn.extend({
  CheckDecheck: function() {
    var _this = this;
    _this.on('change', function() {
      _this.not(this).prop('checked', false);
    });
  }
});

$(function() {
  $('.OUINONA534').CheckDecheck();
  $('.TESTTEST').CheckDecheck();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      test 1
      <input type="checkbox" runat="server" id="Bloc11" value="O" class="OUINONA534" />
      <br />test 2
      <input type="checkbox" value="N" runat="server" id="Bloc12" class="OUINONA534" />
    </td>

  </tr>
  <tr>
    <td colspan='2'>
      <hr>
    </td>
  </tr>
  <tr>
    <td>
      test 3
      <input type="checkbox" runat="server" id="Checkbox1" value="O" class="TESTTEST" />
      <br />test 4
      <input type="checkbox" value="N" runat="server" id="g" class="TESTTEST" />
    </td>
  </tr>
</table>

＆＃13;

选中并取消选中不同的td标签

1 个答案:

Fiddle Demo