<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script>
window.onload = function () {
var wudi = document.getElementById("wudi");
wudi.onclick = function () {
var xzs = document.getElementsByName('xz');
for (var i = 0; i < xzs.length; i++) {
xzs[i].checked = true;};};
var wudi1 = document.getElementById("wudi1");
wudi1.onclick = function() {
var xzs = document.getElementsByName('xz');
for (var i = 0; i < xzs.length; i++) {
xzs[i].checked = false;};}
var wudi2 = document.getElementById("wudi2");
// wudi2.onclick = function () {
// var xzs = document.getElementsByName('xz');
// for (var i = 0; i < xzs.length; i++) {
// if (xzs[i].checked == true) {
// xzs[i].checked = false
// } else {
// xzs[i].checked = true;
// };};}
wudi2.onclick = function () {
var xzs = document.getElementsByName('xz');
for (var i = 0; i < xzs.length; i++) {
xzs[i].checked =! xzs[i].checked
};
}
var qx = document.getElementById("qx");
qx.onclick = function() {
var xzs = document.getElementsByName('xz');
for (var i = 0; i < xzs.length; i++) {
if (qx.checked == true){
xzs[i].checked = true
}else {
xzs[i].checked = false
};};}
var tj = document.getElementById('tj');
tj.onclick = function(){
var xzs = document.getElementsByName('xz');
for (var i = 0; i < xzs.length; i++) {
if (xzs[i].checked ==true){
alert(xzs[i].value)
}
}
}
var xzs = document.getElementsByName('xz');
for (var i = 0;i < xzs.length;i++){
xzs[i].onclick = function (){
qx.checked = true;
for (var j = 0;j <xzs.length;j++){
if (!xzs[j].checked){
qx.checked = false;
break;
};
};
};
};
}
</script>
<body>
<form>
<p>你爱好的运动是？<input type="checkbox" id="qx">全选/全不选</p>
<input type="checkbox" name="xz" value="足球">足球
<input type="checkbox" name="xz" value="篮球">篮球
<input type="checkbox" name="xz" value="羽毛球">羽毛球
<input type="checkbox" name="xz" value="乒乓球 ">乒乓球
<br/>
<input type="button" id="wudi" value="全选">
<input type="button" id="wudi1" value="全不选">
<input type="button" id="wudi2" value="反选">
<input type="button" id="tj" value="提交">
</form>
</body>
</html>
js前端练手小项目
本文含有隐藏内容，请 开通VIP 后查看