zoukankan      html  css  js  c++  java
  • 原生JS实现全选,反选

    无样式,比较丑

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload=function(){
    var arr=document.getElementsByName("a");
    //全选
    var btn=document.getElementsByName("b")[0];
    btn.onclick=function(){
    for(var i=0; i<arr.length; i++){
    arr[i].checked=this.checked;
    }
    }
    //反选
    var btn2=document.getElementsByName("c")[0];
    btn2.onclick=function(){
    for(var i=0; i<arr.length; i++){
    arr[i].checked = !arr[i].checked;
    }
    }
    //取出所选值
    var btn3=document.getElementsByName("d")[0];
    btn3.onclick=function(){
    var str="";
    for(var i=0; i<arr.length; i++){
    if( arr[i].checked ){
    str+=arr[i].value+"; "
    }
    }
    alert(str);
    }
    /*
    !指取反,返回布尔类型
    */
    }
    </script>
    </head>
    <body>

    <input type="checkbox" name="a" value="1" />1
    <input type="checkbox" name="a" value="2" />2
    <input type="checkbox" name="a" value="3" />3
    <input type="checkbox" name="a" value="4" />4


    <br>
    <input type="checkbox" name="b" />全选
    <br>
    <input type="button" name="c" value="反选" />
    <br>
    <input type="button" name="d" value="取出所选值" />

    </body>
    </html>

  • 相关阅读:
    IPSec (一)
    python 面向过程和面向对象
    一键修改 yum 源为 aliyun 阿里源 Shell 脚本
    第11组Alpha冲刺(6/6)
    第11组Alpha冲刺(5/6)
    第11组 Alpha冲刺(4/6)
    第11组Alpha冲刺(3/6)
    第11组 Alpha冲刺 (2/6)
    第11组 Alpha冲刺 (1/6)
    第11组(73)需求分析报告
  • 原文地址:https://www.cnblogs.com/remember-forget/p/9006011.html
Copyright © 2011-2022 走看看