摘要:checkboxlist 選項全選
範例
<input id="cblMsgSelectAll" type="checkbox" name="cblMsgSelectAll"/>全選
<asp:CheckBoxList ID="cblMsgList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="FB">A</asp:ListItem>
<asp:ListItem Value="FH">B</asp:ListItem>
<asp:ListItem Value="CF">C</asp:ListItem>
<asp:ListItem Value="CO">D</asp:ListItem>
<asp:ListItem Value="ICP">E</asp:ListItem>
<asp:ListItem Value="VES">F</asp:ListItem>
<asp:ListItem Value="TAS">G</asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript">
$("#cblMsgSelectAll").click(function () {
if ($("#cblMsgSelectAll").attr("checked")) {
$('#ctl00_ContentPlaceHolder1_cblMsgList > tbody > tr > td > input:checkbox').attr("checked", true);
}
else {
$("#ctl00_ContentPlaceHolder1_cblMsgList").each(function () {
$(this).attr("checked", false);
$('#ctl00_ContentPlaceHolder1_cblMsgList > tbody > tr > td > input:checkbox').attr("checked", false);
});
}
});
</script>
這邊用attr的原因是因為專案使用的jquery版本比較舊
新版請使用prop
HTML checkboxlist 產生出來的HTML可以有兩種
對於TABLE標籤的第一種作法：
1: function Sel_All_A() {
2: $("#CheckBoxList1 > tbody > tr > td > input:checkbox").attr("checked", true);
3: };
4: function UnSel_All_A() {
5: $("#CheckBoxList1 > tbody > tr > td > input:checkbox").attr("checked", false);
6: };
span標籤的第二種作法：
1: function Sel_All_B() {
2: $("#CheckBoxList2 > input:checkbox").attr("checked", true);
3: };
4: function UnSel_All_B() {
5: $("#CheckBoxList2 > input:checkbox").attr("checked", false);
6: };
請自行選用看是哪一種