全选反选取消"/>
【成长笔记】html+jqurey全选反选取消
一、代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1"><thead><tr><th>#</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>乡村教师代言人</td><td>淘宝、阿里、蜂鸟</td></tr><tr><td><input type="checkbox"></td><td>奶茶妹</td><td>商城、金融</td></tr><tr><td><input type="checkbox"></td><td>董老板</td><td>让世界爱上中国选</td></tr></tbody>
</table>
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script>// 点击全选按钮 选中所有的checkbox// DOM绑定事件方法// $("#all")[0].onclick = function(){}// jQuery绑定事件方法$("#all").click(function () {$(":checkbox").prop('checked', true);});// 取消$("#cancel").on("click", function () {$(":checkbox").prop('checked', false);});// 反选$("#reverse").click(function () {var $checkbox = $(":checkbox");for (var i=0;i<$checkbox.length;i++){// 获取原来的选中与否的状态var status = $($checkbox[i]).prop('checked');$($checkbox[i]).prop('checked', !status);//此处取反}})
</script>
</body>
</html>
二、运行效果
更多推荐
【成长笔记】html+jqurey全选反选取消
发布评论