【js】赵雅智_js复选框全选反选全不选案例
2013-03-11 11:12
453 查看
方法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/js）多选复选框自动全选/反选实例
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- js案例-3 复选框checkbox的全选返回控制
- 使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果
- js（复选框，全选，全部选，反选教程)
- js实现复选框全选和反选功能
- JQuery 中 实现复选框全选/全不选/反选功能 案例
- JavaScript--点击按钮实现复选框全选和反选功能
- js与jQuery实现checkbox复选框全选/全不选的方法
- 全选、全部选、反选操作的实现（JS）
- 关于复选框全选反选问题的实例
- JS加强总结第二天（实现select的全选和反选不选的操作 案例）
- js复选框的全选，多选，全选,全不选，反选
- js 按钮实现复选框全选与反选
- js实现复选框的全选、全不选、反选
- 【JS】全选、不选、反选复选框（模板）
- js实现checkbox全选和反选示例
- js 实现 复选框全选与全不选
- JS-复选框的全选与全不选