<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq简单实现全选与反选</title>
<script src="js/jquery1.11.3.min.js"></script>
</head>
<body>
<div id="dv">
<input type="checkbox" name="name" value="" />曹操<br />
<input type="checkbox" name="name" value="" />周瑜<br />
<input type="checkbox" name="name" value="" />诸葛亮<br />
<input type="checkbox" name="name" value="" />刘备<br />
<input type="checkbox" name="name" value="" />张飞<br />
</div>
<hr/>
<input type="button" id="selectAll" value="全选"/>
<input type="button" id="noSelect" value="全不选"/>
<input type="button" id="select" value="反选"/>
<script>
// 全选
$ ( '#selectAll' ).click ( function () {
$ ( '#dv>input' ).each ( function ( i , v ) { //函数的参数可以不传
this.checked = true;
// return false; //return false可以跳出当前循环,此时函数只执行一次
} )
} )
// 全不选
$ ( '#noSelect' ).click ( function () {
$ ( '#dv>input' ).each ( function ( i , v ) {
this.checked = false;
} )
} )
// 反选
$ ( '#select' ).click ( function () {
$ ( '#dv>input' ).each ( function ( i , v ) {
this.checked = ! this.checked; //此时的选中状态与当前的相反
} )
} )
</script>
</body>
</html>
</body>
</html>
使用Jquery实现全选、全不选、反选功能
最新推荐文章于 2024-03-20 05:11:58 发布