<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>多选框练习</
title
>
</
head
>
<
body
>
<
input
type
=
"checkbox"
id
=
"n2"
onclick
=
"set();"
/>全选/全不选<
br
/><
hr
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>羽毛球<
br
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>蓝球<
br
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>橄榄球<
br
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>乒乓球<
br
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>足球<
br
/>
<
input
type
=
"checkbox"
name
=
"nn"
/>棒球<
br
/><
hr
/>
<
input
type
=
"button"
value
=
"全选"
onclick
=
"setAll();"
/>
<
input
type
=
"button"
value
=
"全不选"
onclick
=
"setNone();"
/>
<
input
type
=
"button"
value
=
"反选"
onclick
=
"setBack();"
/>
<
script
type
=
"text/javascript"
>
function setAll() {
var a=document.getElementsByName("nn");//先获取input多选框
//获取的a是个数组,遍历这个数组,设置checked属性
for(var i=0;i<
a.length
;i++){
a[i]
.checked
=
true
;//checked为true时是选中,false时是未选中
}
}
function setNone() {
var
a
=
document
.getElementsByName("nn");
for(var
i
=
0
;i<a.length;i++){
a[i]
.checked
=
false
;
}
}
function setBack() {
var
c
=
document
.getElementsByName("nn");
for(var
i
=
0
;i<c.length;i++){
if(c[i].checked==true){
c[i]
.checked
=
false
;
}
else{
c[i]
.checked
=
true
;
}
}
}
function set() {
var
d
=
document
.getElementById("n2");
if(d.checked==true){
setAll();//直接调用已有的方法,设置checked属性
}
else{
setNone();
}
}
</script>
</
body
>
</
html
>