原生js实现全选全部选

原创 2016年08月28日 20:04:20
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" id="btn1" value="selectAll"/>
<input type="button" id="btn2" value="noSelect"/>
<input type="button" id="btn3" value="UnSelect"/>
<p></p>
    <div id="input1">
        <input  type="checkbox" /><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
        <input type="checkbox"/><br>
    </div>
<script>
    window.onload=function(){
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var div1=document.getElementById("input1");
        var inputChebox=div1.getElementsByTagName("input");
        btn1.onclick= function () {
            for(var i=0;i<inputChebox.length;i++){
                inputChebox[i].checked=true;
            }
        };
        btn2.onclick= function () {
            for(var i=0;i<inputChebox.length;i++){
                inputChebox[i].checked=false;
            }
        };
        btn3.onclick= function () {
           for(var i=0;i<inputChebox.length;i++){
               if(inputChebox.checked==true){
                   inputChebox[i].checked=false;
               }else{
                   inputChebox[i].checked=true;
               }
           }
        }
    }
</script>
</body>
</html>
版权声明:谭友林的博客,技术分享,前端学习博客,版权归博客所有。

JavaScript如何实现全选,全不选

html> html lang="en"> head> meta charset="UTF-8"> title>全选练习title>style type="text/css"> ...
  • pangqiandou
  • pangqiandou
  • 2017年04月23日 10:44
  • 2824

js实现简单的checkbox全选和取消全选效果

js点击checkbox实现全选效果 function DoCheck() { var ch=document.getElementsByName("choose"); ...
  • sunwei3160
  • sunwei3160
  • 2014年08月12日 14:37
  • 16927

js中全选按钮的控制

function checkAll(e, itemName) { var aa = document.getElementsByName(itemName); //获取全选复选框 for (v...
  • bug_bug
  • bug_bug
  • 2006年09月16日 23:11
  • 3587

Html+JS实现全选与非全选操作

Html+JS;全选与非全选
  • qingxue14
  • qingxue14
  • 2017年08月01日 15:13
  • 773

使用js实现复选框的全选、取消功能

function checkAll() { var all=document.getElementById('all'); var one=document.getElemen...
  • zzh_meng520
  • zzh_meng520
  • 2017年02月28日 16:13
  • 4626

HTML 复选框 checkbox 的 JavaScript 的全选和全反选

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: Insert title here 序号 选择 ...
  • joyous
  • joyous
  • 2013年09月30日 11:16
  • 33464

js中checkbox中的全选和反选效果实现

Document //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选...
  • wangdajiao
  • wangdajiao
  • 2016年10月20日 10:54
  • 2655

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 ...
  • sinat_21206105
  • sinat_21206105
  • 2016年09月01日 21:13
  • 8637

原生js写的复选框的全选、不选、反选

window.onload = function(){ var obtn1 = document.getElementById('btn1'); var obtn2 = documen...
  • Fanbin168
  • Fanbin168
  • 2016年01月16日 21:19
  • 2238

【JavaScript】复选框的全选、反选,判断哪些复选框被选中

复选框的全选、反选,判断哪些复选框被选中,这个功能不难做, 利用document.getElementsByName("xxx");能够轻易实现,注意其返回值是一个节点数组便是了。 不过这功能对于...
  • yongh701
  • yongh701
  • 2015年06月06日 09:21
  • 3619
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生js实现全选全部选
举报原因:
原因补充:

(最多只允许输入30个字)