添加多个复选框 ,三个按钮, 再用JQuery为其添加单击事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
$(".check_all").click(function () {
//设置复选框 checked为true 为选中
$("input[type='checkbox']").prop("checked", true);
});
$(".Invert_Selection").click(function () {
$("input[type='checkbox']").each(function () {
//当前被选中的事件等于当前未被选中的事件
this.checked = !this.checked;
})
});
$(".not_check_all").click(function () {
//设置复选框 checked为true 为全不选
$("input[type='checkbox']").prop("checked", false);
});
});
</script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<input type="checkbox" />龙
<input type="checkbox" />凤
<input type="checkbox" />饕餮
<input type="checkbox" />鸾凤
</div>
<div>
<input type="button" class="check_all" value="全选" />
<input type="button" class="Invert_Selection" value="反选" />
<input type="button" class="not_check_all" value="全不选" />
</div>
</body>
</html>
初始效果如图:
点击全选效果如图:
全不选效果如图:——取消之前选中的
选中一个复选框,再点击反选,效果如图:
以上就是全部内容了!