javascript
Javascript
1、全选、全不选、反选的js实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<input type="checkbox">吃
<input type="checkbox">喝
<input type="checkbox">玩
<input type="checkbox"> 乐
<script type="text/javascript">
//获取三个button
var btns = document.querySelectorAll('button');
//获取所有复选框内容
var inputs = document.querySelectorAll('input');
btns[0].onclick = function () {
//循环获取到所有的复选框的input
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
};
btns[1].onclick = function () {
//
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
};
btns[2].onclick = function () {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
}
};
</script>
</body>
</html>
效果图：
2、全选、全不选、反选的jquery实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
你爱好的运动是:<input type="checkbox" id="checkAllbox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<br />
<input type="button" id="checkAll" value="全选" />
<input type="button" id="checkNo" value="全不选" />
<input type="button" id="checkRev" value="反选" />
<input type="button" id="submit" value="提交" />
</form>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var $items = $(':checkbox[name=items]');
var $checkAllbox = $('#checkAllbox');
$('#checkAll').click(function () {
//元素固有属性有prop,自定义属性用attr
$items.prop('checked', true);
$checkAllbox.prop('checked', true);
})
$('#checkNo').click(function () {
//元素固有属性有prop,自定义属性用attr
$items.prop('checked', false);
$checkAllbox.prop('checked', false);
})
$('#checkRev').click(function () {
//遍历
$items.each(function () {
this.checked = !this.checked;
})
$checkAllbox.prop('checked', $items.filter(':checked').length == $items.length)
$checkAllbox.prop('checked', $items.filter(':not(:checked)').length == 0)
})
$checkAllbox.click(function () {
$items.prop('checked', this.checked)
})
$items.click(function () {
$checkAllbox.prop('checked', $items.filter(':checked').length == $items.length)
})
</script>
</body>
</html>
