发布时间：2019年12月03日 21时07分03秒
属性：程序Web开发 > Javascript/Html
访问次数：89862
Javascript处理checkbox全选方法
在div、ul或表格Table元素中，有若干个勾选框checkbox，需要一次性全选或取消全选，通过客户端脚本处理，选择元素查找到下面的子元素Checkbox的个数，循环处理checked属性即可。
在本文示例中，先建立一个Table列表，第一列为“角色名”，第二列为“用户组成员”，第三组时勾选“选取角色”项。在申请角色申请时可以提供多选，需要提供全选和全部取消选择，也就是清空处理。Table加入简单的CSS样式：table.characterRolse、 table.characterRolse th、 table.characterRolse td ；.tableFooter 为表格页脚， .alignLeft、 .alignRight、 .alignCenter 为三个对齐方式。
<style type="text/css">
/* Copyright(C) 遗昕|Weisim3.com 12.03.2019
Javascript处理checkbox全选方法 */
.alignLeft {
text-align: left
}
.alignRight {
text-align: right
}
.alignCenter {
text-align: center
}
.tableFooter {
border-bottom: 1px solid #333;
background-color: cornflowerblue;
padding: 5px
}
table.characterRolse {
border: 1px solid #333;
border-collapse: collapse;
width: 100%
}
table.characterRolse th {
padding: 8px;
border: 1px solid #333;
background-color: cornflowerblue;
}
table.characterRolse td {
padding: 8px;
border: 1px solid #333;
background-color: #ffffff;
}
</style>
在html的body中写入table，第一列是“角色名”；第二列是“角色用户组的子项目”；第三列“选取角色”为checkbox选取对应角色。写入div放入两组按钮，分别用来处理checkbox的全选或取消全选清空用。分别加入上面对应的css样式属性。
<body>
<!--Copyright(C) 遗昕|Weisim3.com 12.03.2019
Javascript处理checkbox全选方法--> <table class="
characterRolse">
<thead>
<tr>
<th>角色名</th>
<th class="">用户组的子项目</th>
<th class="alignCenter">选取角色</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="" style="">图像设计</a>
</td>
<td>Adobe，Corel </td>
<td class="alignCenter">
<input id="Checkbox_2" type="checkbox" >
</td>
</tr>
<tr>
<td>
<a href="" style="">程序Web开发</a>
</td>
<td>Javascript/Html，Microsoft，Oracle/Sun，Zend，Web综合，Adobe </td>
<td class="alignCenter">
<input id="Checkbox_3" type="checkbox" >
</td>
</tr>
<tr>
<td>
<a href="" style="">移动/手机应用开发</a>
</td>
<td>Android，iPhone，Windows Phone，移动开发综合 </td>
<td class="alignCenter">
<input id="Checkbox_4" type="checkbox">
</td>
</tr>
<tr>
<td>
<a href="" style="">动画 CG</a>
</td>
<td>Autodesk，NewTek，MAXON，Zbrush，影视动漫媒体 </td>
<td class="alignCenter">
<input id="Checkbox_5" type="checkbox">
</td>
</tr>
<tr>
<td>
<a href="" style="">办公</a>
</td>
<td>Adobe，Microsoft </td>
<td class="alignCenter">
<input id="Checkbox_6" type="checkbox">
</td>
</tr>
<tr>
<td>
<a href="" style="">电脑音乐/音乐</a>
</td>
<td>Imgae-Line，Cakewalk，音乐综合 </td>
<td class="alignCenter">
<input id="Checkbox_7" type="checkbox">
</td>
</tr>
<tr>
<td>
<a href="" style="">图片</a>
</td>
<td>设计图例，桌面墙纸，摄影图例 </td>
<td class="alignCenter">
<input id="Checkbox_8" type="checkbox">
</td>
</tr>
</tbody>
</table>
<div class="tableFooter alignRight">
<div style="float: right; padding: 0px 10px">
B:<input id="Btn_Check_All" type="button" value="全选" onclick="CheckAll()" />
<input id="Btn_Uncheck_All" type="button" value="清空" onclick="UnCheckAll()" />
</div>
<div style="float: right; padding: 0px 10px">
A:<input id="Btn_Check_All_A" type="button" value="全选" onclick="CheckAll_A()" />
<input id="Btn_Uncheck_All_A" type="button" value="清空" onclick="UnCheckAll_A()" />
</div>
<div style="clear: both"></div>
</div>
</body>
加入jquery选取table中所有的checkbox“$(".characterRolse input[type='checkbox']")”，用.each或for方式将checkbox循环处理checkbox的checked属性，用for循环，需要先将table中的checkbox全部数量获取“$(".characterRolse input[type='checkbox']").length”，然后将checkbox逐个循环处理checked属性。示例分别对.each和for两种方式进行了代码演示，详细脚本如下：
<script type="text/javascript">
/* Copyright(C) 遗昕|Weisim3.com 12.03.2019
Javascript处理checkbox全选方法 */
function CheckAll() {
alert($(".characterRolse input[type='checkbox']").length);
$(".characterRolse input[type='checkbox']").each(function () {
this.checked = true;
});
}
function UnCheckAll() {
$(".characterRolse input[type='checkbox']").each(function () {
this.checked = false;
});
}
function CheckAll_A() {
var checkLength = $(".characterRolse input[type='checkbox']").length;
for (var i = 0; i < checkLength; i++) {
$(".characterRolse input[type='checkbox']")[i].checked = true;
}
}
function UnCheckAll_A() {
var checkLength = $(".characterRolse input[type='checkbox']").length;
for (var i = 0; i < checkLength; i++) {
$(".characterRolse input[type='checkbox']")[i].checked = false;
}
}
</script>
最终效果如下：
文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系QQ：729260499。
