在具有特定类的td内的所有复选框中,只应检查其中一个

时间:2017-02-11 07:49:16

标签: jquery html checkbox

我有一个gridview,它以表格形式呈现如下。在每一行中我有12个复选框,其中4个复选框共享同一个类。现在我希望td中的所有复选框都有特定的类,其中只有一个应该被check.class动态地附加到每个td。例如我想要所有tds中有类' gvclass1'一次只能检查一个复选框。我想在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>

1 个答案:

答案 0 :(得分:0)

您需要在所有复选框上创建一个事件监听器。检查父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);

})