检查一个复选框将检查数组中的所有复选框

Question

如果选中一个复选框，我想检查所有其他复选框。我的复选框是一个数组。如果选中一个复选框，我希望检查该行中的所有复选框。我的代码

<tr> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportModuleName" runat="server" name="report"></asp:CheckBox> 
    </td> 
    <td class="particulrs"></td> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportAdd" runat="server" name="reports"></asp:CheckBox> 
    </td> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportEdit" runat="server" name="reports"></asp:CheckBox> 
    </td> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportDelete" runat="server" name="reports"></asp:CheckBox> 
    </td> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportView" runat="server" name="reports"></asp:CheckBox> 
    </td> 
    <td class="small"> 
    <asp:CheckBox ID="chkReportPrint" runat="server" name="reports"></asp:CheckBox> 
    </td> 
    <td class="othr"> 
    <span><input type="checkbox" id="chkReportActivity1" name="reports" /></span> 
    </td> 
</tr> 

检查名为report.I的复选框想要检查具有名称报告的所有复选框。复选框chkReportModuleName是一个数组。当它被点击时，我只希望检查该行中的复选框。

，我已经尝试了jQuery如下：

$('input[name="ctl00$MainContent$chkTransModuleName"]').click(function() { 
    $('input[name="trans"][i]').attr("checked", this.checked); 
    $('input[id="MainContent_chkTransAdd"]').attr("checked", this.checked); 
    $('input[id="MainContent_chkTransEdit"][i]').attr("checked", this.checked); 
    $('input[id="MainContent_chkTransDelete"][i]').attr("checked", this.checked); 
    $('input[id="MainContent_chkTransView"][i]').attr("checked", this.checked); 
    $('input[id="MainContent_chkTransPrint"][i]').attr("checked", this.checked); 
}); 

它运行，但我想检查的只有那些复选框这是一行。

有人可以帮助我吗？ 感谢

Answer 1

假设名称ctl00$MainContent$chkTransModuleName是正确

$('input[name="ctl00$MainContent$chkTransModuleName"]').click(function() { 
    var chk = !!this.checked; 
    $(this).closest('tr').find('.small > input[type="checkbox"]').attr('checked', chk);  
}); 

Answer 2

首先，给复选框CssClass，使他们更容易识别：

<tr> 
    <td class="small"><asp:CheckBox ID="chkReportModuleName" CssClass="reportModule" runat="server" name="report"></asp:CheckBox></td> 
    <td class="particulrs"></td> 
    <td class="small"><asp:CheckBox ID="chkReportAdd" CssClass="checkbox" runat="server" name="reports"></asp:CheckBox></td> 
    <td class="small"><asp:CheckBox ID="chkReportEdit" CssClass="checkbox" runat="server" name="reports"></asp:CheckBox></td> 
    <td class="small"><asp:CheckBox ID="chkReportDelete" CssClass="checkbox" runat="server" name="reports"></asp:CheckBox></td> 
    <td class="small"><asp:CheckBox ID="chkReportView" CssClass="checkbox" runat="server" name="reports"></asp:CheckBox></td> 
    <td class="small"><asp:CheckBox ID="chkReportPrint" CssClass="checkbox" runat="server" name="reports"></asp:CheckBox></td> 
    <td class="othr"> 
     <span><input type="checkbox" id="chkReportActivity1" name="reports" /></span> 
    </td> 
</tr> 

然后你就可以使用这个jQuerycode：

$('.reportModule').click(function() { 
    var $el = $(this), $parentTR = $el.closest("tr"), checked = $el.is(":checked"); 
    $(".checkbox", $parentTR).attr("checked", checked); 
}); 

此代码使用最接近tr元素在其中寻找相关的复选框来切换上下文。