jQuery自定义插件全选框封装

嘴强程序员

2024-06-08 帮助4人

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.fn.extend({
//传入复选框可传多个
"demo": function() {
let chebox = [];
var bo = $(this);
for (var i = 0; i < arguments.length; i ) {
arguments[i].each(function() {
var inde = $(this);
chebox.unshift(inde);
})
}
$(this).click(function() {
for (var i = 0; i < chebox.length; i ) {
chebox[i].prop("checked", $(this).prop("checked"))
}
})
// 完善全选
for (var i = 0; i < chebox.length; i ) {
chebox[i].click(function() {
var box = true;
for (var i = 0; i < chebox.length; i ) {
if (!chebox[i].prop("checked")) {
box = false;
}
}
bo.prop("checked", box);
})
}
}
})
$(function() {
// "#checkall" 全选框后面可传多组复选框
$("#checkall").demo($("input:gt(1)"), $("input:eq(1)"))
})
</script>
</head>
<body>
<input type="checkbox" name="" id="checkall" value="全选" />全选
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3
<input type="checkbox">4
<input type="checkbox">5
<input id="che" type="checkbox">6
</body>
</html>

实现效果

学新通

这篇好文章是转载于：学新通技术网