HTML+JS 全选与取消全选功能
这是一个全选与取消全选的小功能,我在写动态表格的时候自己写的,记录下来以便不时之需,也欢迎大家交流。
前端HTML
<!-- 全选框-->
<input type="checkbox" class="box-title" onclick="selectAll()">
<!-- 需要被选中的部分-->
<input name='box' type='checkbox'>
<input name='box' type='checkbox'>
<input name='box' type='checkbox'>
<input name='box' type='checkbox'>
JS
var isCheckAll = false;
function selectAll() {
// 取消全选
if (isCheckAll) {
$("input[name='box']").each(function() {
this.checked = false;
this.parentNode.parentNode.style.backgroundColor="";
});
isCheckAll = false;
}
// 全选
else {
$("input[name='box']").each(function() {
this.checked = true;
this.parentNode.parentNode.style.backgroundColor="#F78181";
});
isCheckAll = true;
}
}