<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>全选案例</
title
>
<
style
>
*{margin: 0;padding: 0;}
h2{margin: 0 auto;width: 600px;text-align: center}
#box{width: 100px;line-height: 30px;margin: 100px auto;border:1px solid black;text-align: center;}
.checkAll{background: black;color: white;line-height: 50px;}
</
style
>
</
head
>
<
body
>
<
h2
>全选案例</
h2
><
hr
>
<
div
id
=
"box"
>
<
div
class
=
"checkAll"
><
input
type
=
"checkbox"
id
=
"checkAll"
onclick
=
"checkAll()"
><
label
for
=
"checkAll"
>全选</
label
></
div
>
<
div
class
=
"item"
>
<
input
type
=
"checkbox"
name
=
"item[]"
>桃子<
br
>
<
input
type
=
"checkbox"
name
=
"item[]"
>栗子<
br
>
<
input
type
=
"checkbox"
name
=
"item[]"
>草莓<
br
>
<
input
type
=
"checkbox"
name
=
"item[]"
>香蕉<
br
>
</
div
>
</
div
>
</
body
>
<
script
>
function checkAll(){
var checkall, item;
checkall = document.getElementById("checkAll");
item = document.getElementsByName("item[]");
if(checkall.checked){
for(var i=0;i<
item.length
;i++){
item[i]
.checked
=
true
;
}
}else{
for(var
i
=
0
;i<item.length;i++){
item[i]
.checked
=
false
;
}
}
}
</script>
</
html
>