jquery一行代码实现全选、反选、不选
jquery实现全选反选不选,因为jquery中提供了丰富的选择器,相比js减少了遍历的操作,极大地提高了效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--选项-->
<input type="checkbox" value="java">java
<input type="checkbox" value="c">c
<input type="checkbox" value="c++">c++
<input type="checkbox" value="js">js
<input type="checkbox" value="php">php
<br>
<!--按钮-->
<button class="btnAll" data-op="all">全选</button>
<button class="btnRev" data-op="rev">反选</button>
<button class="btnNot" data-op="not">不选</button>
<!--引入jquery文件-->
<script src="../js/jquery-1.11.3.js"></script>
<script>
$(function () {
<!--全选-->
$(".btnAll").click(function () {
$("input").prop("checked","checked");
})
<!--全不选-->
$(".btnNot").click(function () {
$("input").prop("checked","");
})
<!--反选-->
$(".btnRev").click(function () {
$("input:checkbox").each(function (i,e) {
$(e).prop('checked',!$(e).prop('checked'));
})
})
})
</script>
</body>
</html>