当前位置:编程学习 > JS >>

赵雅智_js复选框全选反选全不选案例

方法1:
html界面:
 
[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>  
 
<!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代码:
 
[javascript]  
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(){  
        //遍历所有 na
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,