jquery - 在具有特定类的 td 内的所有复选框中，只应选中其中一个

Question

我有一个以表格形式呈现的 gridview，如下所示。在每一行中，我有 12 个复选框，其中 4 个复选框共享同一个类。现在我想在 td 内具有特定类的所有复选框中，只应检查其中一个。类动态附加到每个 td。例如，我想在所有具有类 'gvclass1' 的 tds 中，一次只能检查一个复选框。我想要 td 选择器中类名的动态变量。请帮帮我..

 <div>
        <table runat="server" border="1" width="100%">
        <tr class="row0">
        <td colspan="4" >Aetna commercial</td>
        <td colspan="4">anthem blue cross</td>
        <td colspan="4">anthem healthy</td>
        </tr>
        <tr class="row1">
        <td class="gvclass1">
            <asp:CheckBox ID="CheckBox1" runat="server" Checked="true" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox2" runat="server" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox3" runat="server" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox4" runat="server" /></td>
          <td class="gvclass2">
              <asp:CheckBox ID="CheckBox5" runat="server" Checked="true" /></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox6" runat="server" /></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox7" runat="server" /></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox8" runat="server" /></td>
          <td class="gvclass3">
              <asp:CheckBox ID="CheckBox9" runat="server" Checked="true" /></td>
         <td class="gvclass3">
             <asp:CheckBox ID="CheckBox10" runat="server" /></td>

         <td class="gvclass3"> <asp:CheckBox ID="CheckBox11" runat="server" /></td>
         <td class="gvclass3">
             <asp:CheckBox ID="CheckBox12" runat="server" /></td>
        </tr>
        <tr class="row2">

        <td class="gvclass1">
            <asp:CheckBox ID="CheckBox13" runat="server" Checked="true" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox14" runat="server" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox15" runat="server" /></td>
         <td class="gvclass1">
             <asp:CheckBox ID="CheckBox16" runat="server" /></td>
          <td class="gvclass2">
              <asp:CheckBox ID="CheckBox17" runat="server" /></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox18" runat="server" /></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox19" runat="server" checked="true"/></td>
         <td class="gvclass2">
             <asp:CheckBox ID="CheckBox20" runat="server" /></td>
          <td class="gvclass3">
              <asp:CheckBox ID="CheckBox21" runat="server" /></td>
         <td class="gvclass3">
             <asp:CheckBox ID="CheckBox22" runat="server" /></td>
         <td class="gvclass3">
             <asp:CheckBox ID="CheckBox23" runat="server" checked="true"/></td>
         <td class="gvclass3">
             <asp:CheckBox ID="CheckBox24" runat="server" /></td>
        </tr>
        </table>

    </div>

Answer 1

您需要在所有复选框上创建一个事件监听器。检查什么是父 td 类并取消选中具有相同 td 父类的所有其他复选框。我希望这会帮助你。

jQuery('input[type="checkbox"]').click(function(){
var parentClass = jQuery(this).parent('td').attr('class');
var checked = jQuery(this);
jQuery('.'+parentClass+' input[type="checkbox"]').each(function(i,e){
    jQuery(this).prop('checked', false);
})
jQuery(checked ).prop('checked', true);

})