三十：前端之表单的制作(全选,全不选,反选，提交)
2018-06-28 本文已影响0人
rtrhhthth
如下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="post" action="">
你爱好的运动是?
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
<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" name="checkall" id="checkall" value="全选">
<input type="button" name="checkall" id="checkNo" value="全不选">
<input type="button" name="checkall" id="checkReverse" value="反选">
<input type="button" name="checkall" id="send" value="提 交">
<script type="text/javascript">
document.getElementById('checkall').onclick=function(){
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked="checked";
}
}
document.getElementById('checkNo').onclick=function(){
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked=null;
}
}
document.getElementById('checkReverse').onclick=function(){
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
if (checkElement.checked) {
checkElement.checked=null;
}
else{
checkElement.checked="checked";
}
}
}
document.getElementById('send').onclick=function(){
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked=null;
alert("提交成功")
}
}
document.getElementById('checkItems').onclick=function()
{
var checkElements=document.getElementsByName('items');
if (this.checked) {
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked="checked";
}
}
else{
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked=null;
}
}
}
</script>
</body>
</html>
输出结果：
QQ截图20180628231310.png
