您的位置：首页 > Web前端 > JavaScript

JavaScript实现的全选、全不选和反选的代码

2012-11-24 14:39 573 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

function sel_all(flag){

//定义标记，

var isSel=false;

// var inputobj = document.getElementsByTagName("input");

//获取所有的name="aihao" 复选框

var inputobj = document.getElementsByName("aihao");

//alert(inputobj.length);

//根据flag判断用户当前要进行什么操作，flag =1 表示全选 flag=0 全不选

if(flag){

isSel=true;

}

//遍历所有的checkbox 设置值

for(var i=0;i<inputobj.length;i++){

inputobj[i].checked =isSel;

}

}

//实现反选

function sel_fanxuan(){

//获取所有的对象

var inputobj = document.getElementsByName("aihao");

//遍历设置对象的属性，checked属性

for(var i=0;i<inputobj.length;i++){

//做一个判断，判断当前是否被选中

if(inputobj[i].checked){

inputobj[i].checked =false;

}else{

inputobj[i].checked =true;

}

}

}

</script>

</head>

<body>

<input type="checkbox" name="aihao" value="吃包子" />吃包子<br>

<input type="checkbox" name="aihao" value="女" />女<br>

<input type="checkbox" name="aihao" value="男" />男<br>

<input type="checkbox" name="aihao" value="逛街" />逛街<br>

<input type="checkbox" name="aihao" value="打游戏" />打游戏<br>

<input type="checkbox" name="aihao" value="睡觉" />睡觉<br>

<input type ="button" onclick="sel_all(1)" value="====全选====" />

<input type ="button" onclick="sel_all(0)" value="====全不选====" />

<input type ="button" onclick="sel_fanxuan()" value="====反选====" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航