檢查一個複選框將檢查數組中的所有複選框

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元素在其中尋找相關的複選框來切換上下文。