原生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>
版权声明:谭友林的博客,技术分享,前端学习博客,版权归博客所有。

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

js点击checkbox实现全选效果 function DoCheck() { var ch=document.getElementsByName("choose"); ...

JavaScript如何实现全选,全不选

html> html lang="en"> head> meta charset="UTF-8"> title>全选练习title>style type="text/css"> ...

用原生js实现复选框选择以及全选非全选功能 (待看)

CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。   该控件表明一个特定的状态(即选项...

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

window.onload = function(){ var obtn1 = document.getElementById('btn1'); var obtn2 = documen...

原生js全选,反选,不选

1.h5文档类型和字符集是? 2.请描述h5的canvas canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画...

(转) 用自定义图片代替原生checkbox实现全选,删除以及提交

(转) http://blog.csdn.net/liusaint1992/article/details/49557557 做出来的效果类似这样: 要代替原生的checkbox。 那么要...

用自定义图片代替原生checkbox实现全选,删除以及提交

本文是使用了jQuery来用自定义图片代替原生checkbox复选框实现全选,删除,表单提交。...

jquert结合原生javascript实现的checkbox全选与全不选

之所以要使用原生javascript,是因为jQuery的attr方法在这里不能实现,具体是怎么样的,我也不知道。 html代码: 全部选定 全部取消 javascript代码: 得保...

js实现全选

  • 2014年02月17日 20:31
  • 2KB
  • 下载

js实现checkbox 全选和取消

  • 2014年07月16日 17:29
  • 921B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生js实现全选全部选
举报原因:
原因补充:

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