关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面
可以在点上面全选/全不选时全部选中或者取消
在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整
功能比较完善
以下是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选练习</title>
<script>
window.onload = function () {
var items = document.getElementsByName( "items");
var checkedALLBtn = document.getElementById("checkedAllBtn")
checkedALLBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
}
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
}
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function () {
checkedAllBox.checked=true;
for (var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
if(!items[i].checked){
checkedAllBox.checked=false;
}
}
}
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=checkedAllBox.checked;
}
}
for (var i=0;i<items.length;i++){
items[i].onclick = function () {
checkedAllBox.checked=true;
for (var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是 <input type="checkbox" id="checkedAllBox">全选/全不选
<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="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
