<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.top{
height: 100px;
line-height: 100px;
width: 600px;
border: 1px solid #FF7E00;
text-align: center;
}
.btn{
width: 600px;
height: 50px;
line-height: 50px;
border: 1px solid #FF7E00;
margin-top: 40px;
text-align: center;
}
input{
margin-left: 20px;
cursor: pointer;
}
label{
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="top">
<label ><input type="checkbox" class="box1"/>英语</label>
<label ><input type="checkbox" class="box1"/>衣服</label>
<label ><input type="checkbox" class="box1"/>美丽</label>
<label ><input type="checkbox" class="box1"/>大锅</label>
<label ><input type="checkbox" class="box1"/>信息</label>
<label ><input type="checkbox" class="box1"/>电脑</label>
<label ><input type="checkbox" class="box1"/>火锅</label>
</div>
<div class="btn">
<label ><input type="checkbox" id="quan" />全选</label>
<label ><input type="checkbox" id="fan" />反选</label>
<label ><input type="checkbox" id="quxiao" />取消选择</label>
</div>
</div>
</body>
</html>
<script type="text/javascript">
return document.getElementById(obj);
return document.getElementsByClassName(css);
}
var chek=gid("quan");
var cks=gcs("box1");
var chek1=gid("fan");
var chek2=gid("quxiao");
//全选、全不选
chek.οnclick=function(){
chek1.checked=false;
chek2.checked=false;
var cek=chek.checked;
for(var i=0;i<cks.length;i++)
{
cks[i].checked=cek;
}
}
//反选
chek1.οnclick=function(){
chek.checked=false;
chek2.checked=false;
for(i=0;i<cks.length;i++){
var num=cks[i];
if(num.checked==false){
num.checked=true;
}else{
num.checked=false;
}
}
}
// 取消选择
chek2.οnclick=function(){
chek.checked=false;
chek1.checked=false;
for(i=0;i<cks.length;i++){
var num=cks[i];
if(num.checked==true){
num.checked=false;
}
}
}
//
}
</script>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.top{
height: 100px;
line-height: 100px;
width: 600px;
border: 1px solid #FF7E00;
text-align: center;
}
.btn{
width: 600px;
height: 50px;
line-height: 50px;
border: 1px solid #FF7E00;
margin-top: 40px;
text-align: center;
}
input{
margin-left: 20px;
cursor: pointer;
}
label{
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="top">
<label ><input type="checkbox" class="box1"/>英语</label>
<label ><input type="checkbox" class="box1"/>衣服</label>
<label ><input type="checkbox" class="box1"/>美丽</label>
<label ><input type="checkbox" class="box1"/>大锅</label>
<label ><input type="checkbox" class="box1"/>信息</label>
<label ><input type="checkbox" class="box1"/>电脑</label>
<label ><input type="checkbox" class="box1"/>火锅</label>
</div>
<div class="btn">
<label ><input type="checkbox" id="quan" />全选</label>
<label ><input type="checkbox" id="fan" />反选</label>
<label ><input type="checkbox" id="quxiao" />取消选择</label>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.οnlοad=function(){
//获取id
function gid(obj){return document.getElementById(obj);
}
//获取class
function gcs(css){return document.getElementsByClassName(css);
}
var chek=gid("quan");
var cks=gcs("box1");
var chek1=gid("fan");
var chek2=gid("quxiao");
//全选、全不选
chek.οnclick=function(){
chek1.checked=false;
chek2.checked=false;
var cek=chek.checked;
for(var i=0;i<cks.length;i++)
{
cks[i].checked=cek;
}
}
//反选
chek1.οnclick=function(){
chek.checked=false;
chek2.checked=false;
for(i=0;i<cks.length;i++){
var num=cks[i];
if(num.checked==false){
num.checked=true;
}else{
num.checked=false;
}
}
}
// 取消选择
chek2.οnclick=function(){
chek.checked=false;
chek1.checked=false;
for(i=0;i<cks.length;i++){
var num=cks[i];
if(num.checked==true){
num.checked=false;
}
}
}
//
}
</script>
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
