【js】js复选框全选反选全不选案例
2012-11-06 21:46
537 查看
方法1：
html界面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>nameNode.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript" src="./js/nameNode1.js" charset="UTF-8"></script>
<body>
<div>
兴趣爱好：
<br>
<br>
<input type="checkbox" name="fav" value="look" checked="checked">
看书
<input type="checkbox" name="fav" value="write">
写字
<input type="checkbox" name="fav" value="drow">
画画
<input type="checkbox" name="fav" value="dubao">
读报
<input type="checkbox" name="fav" value="TV">
看电视
</div>
<div>
<input type="radio" name="hx" id="qx" value="1">
全选
<input type="radio" name="hx" id="fx" value="2">
反选
<input type="radio" name="hx" id="qbx" value="0">
全不选
</div>
</body>
</html>
js代码：
window.onload = function(){var favs = document.getElementsByName("fav");
//获取id = "qx"的元素节点的对象
var qx = document.getElementById("qx");
//注册事件
qx.onclick = function(){
//遍历所有 那么="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked="vhecked";
}
}
//
var fx = document.getElementById("fx");
//注册事件
fx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked=!fav.checked;
}
}
var qbx = document.getElementById("qbx");
//注册事件
qbx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
//获取具体的某个对象
var fav = favs[i];
//修改checked属性
fav.checked=false;
}
}
}
方法2：
html界面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nameNode.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript" src="./js/nameNode2.js" charset="UTF-8"></script>
<body>
<div>
兴趣爱好：
<br>
<br>
<input type="checkbox" name="fav" value="look" checked="checked">
看书
<input type="checkbox" name="fav" value="write">
写字
<input type="checkbox" name="fav" value="drow">
画画
<input type="checkbox" name="fav" value="dubao">
读报
<input type="checkbox" name="fav" value="TV">
看电视
</div>
<div>
<input type="radio" name="hx" id="qx" value="1">
全选
<input type="radio" name="hx" id="fx" value="2">
反选
<input type="radio" name="hx" id="qbx" value="0">
全不选
</div>
</body>
</html>
js界面：
window.onload = function(){
var favs = document.getElementsByName("fav");
//获取id = "qx"的元素节点的对象
var qx = document.getElementById("qx");
//注册事件
qx.onclick = function(){
//遍历所有 那么="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked="vhecked";
}
}
//
var fx = document.getElementById("fx");
//注册事件
fx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked=!fav.checked;
}
}
var qbx = document.getElementById("qbx");
//注册事件
qbx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
//获取具体的某个对象
var fav = favs[i];
//修改checked属性
fav.checked=false;
}
}
}
方法3：
html界面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nameNode.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript" src="./js/nameNode3.js" charset="UTF-8"></script>
<body>
<div>
兴趣爱好：
<br>
<br>
<input type="checkbox" name="fav" value="look" checked="checked">
看书
<input type="checkbox" name="fav" value="write">
写字
<input type="checkbox" name="fav" value="drow">
画画
<input type="checkbox" name="fav" value="dubao">
读报
<input type="checkbox" name="fav" value="TV">
看电视
</div>
<div>
<input type="radio" name="hx" id="qx" value="1">
全选
<input type="radio" name="hx" id="fx" value="2">
反选
<input type="radio" name="hx" id="qbx" value="0">
全不选
</div>
</body>
</html>
js界面：
window.onload = function(){
var favs = document.getElementsByName("fav");
//获取id = "qx"的元素节点的对象
var qx = document.getElementById("qx");
//注册事件
qx.onclick = function(){
//遍历所有 那么="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked="vhecked";
}
}
//
var fx = document.getElementById("fx");
//注册事件
fx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
var fav = favs[i];
fav.checked=!fav.checked;
}
}
var qbx = document.getElementById("qbx");
//注册事件
qbx.onclick = function(){
//遍历所有 name="fav"的节点对象并且改this.checked=true
for(var i=0;i<favs.length;i++){
//获取具体的某个对象
var fav = favs[i];
//修改checked属性
fav.checked=false;
}
}
}
方法4：
html界面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nameNode.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript" src="./js/nameNode4.js" charset="UTF-8"></script>
<body>
<div>
兴趣爱好：
<br>
<br>
<input type="checkbox" name="fav" value="look" checked="checked">
看书
<input type="checkbox" name="fav" value="write">
写字
<input type="checkbox" name="fav" value="drow">
画画
<input type="checkbox" name="fav" value="dubao">
读报
<input type="checkbox" name="fav" value="TV">
看电视
</div>
<div>
<input type="radio" name="hx" id="qx" value="1" onclick="test(1)">
全选
<input type="radio" name="hx" id="fx" value="2" onclick="test(2)">
反选
<input type="radio" name="hx" id="qbx" value="0" onclick="test(0)">
全不选
</div>
</body>
</html>
js界面：
function test(value){
//获取name="fav"的所有节点对象
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
var fav = favs[i];
switch(value){
case 1:
fav.checked = true;
break;//break语句只是跳出switch语句块，并没跳出for循环
case 2:
fav.checked = !fav.checked;
break;
case 0:
fav.checked = false;
break;
}
}
}
运行结果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【js】赵雅智_js复选框全选反选全不选案例
- 使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- js实现复选框全选和反选功能
- js（复选框，全选，全部选，反选教程)
- （html/js）多选复选框自动全选/反选实例
- JQuery 中 实现复选框全选/全不选/反选功能 案例
- js案例-3 复选框checkbox的全选返回控制
- js 实现复选框全选和反选 方法大全
- JavaScript--点击按钮实现复选框全选和反选功能
- js中checkbox中的全选和反选效果实现
- js与jQuery实现checkbox复选框全选/全不选的方法
- 简单JS全选、反选代码
- javaScript 全选 反选案例
- 复选框全选和反选例子
- js实现多个复选框的全选与取消
- ExtJS 4.2 创建带复选框的树，并且有全选反选功能
- JS全选反选脚本结合GridView
- js全选 复选框的问题
- 【JS】全选、不选、反选复选框（模板）