码迷,mamicode.com
首页 > Web开发 > 详细

js实现checkbox全选,不选,反选

时间:2014-09-10 12:16:10      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   for   div   cti   sp   

废话少说,先帖代码,然后简述一下遇到的小困难……就是代码中的绿色字体;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3</title>
</head>
<body>
    <button id="all_yes">全选</button>
    <button id="all_no">不选</button>
    <button id="all_ex">反选</button>
    <input type="checkbox" name="test">
    <input type="checkbox" name="test">
    <input type="checkbox" name="test">
    <input type="checkbox" name="test">
    <input type="checkbox" name="test">
    <input type="checkbox" name="test">
    <script>
        var all_yes = document.getElementById("all_yes");
        var all_no = document.getElementById("all_no");
        var all_ex = document.getElementById("all_ex");
        var checkboxs = document.getElementsByTagName("input");
        function yes(){
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = true;//这个地方的true或者false是不能够加引号的,checked属性值可以是"checked"或者true和false,前者有"",后者没有.
            }
        }
        function no(){
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = false;
            }
        }
        function ex(){
            for (var i = 0; i < checkboxs.length; i++) {
                if(checkboxs[i].checked == false){
                    checkboxs[i].checked = true;
                }else{
                    checkboxs[i].checked = false;
                }
            }
        }
        all_yes.onclick = yes;
                    /*这个地方刚开始的时候写成all_yes.onclick = yes();这样的话在页面加载的时候就会出现,以及全部选择的现象。这是因为如果是yes()的话,浏览器就默认是调用yes()函数,就会自动执行该函数。这个是没有参数的写法。如果是有参数的话,就需要写成
                    all_yes.onclick = function(){
                        yes(param01,param02);
                    }
                    */
        all_no.onclick = no;
        all_ex.onclick = ex;
    </script>
</body>
</html>

 

js实现checkbox全选,不选,反选

标签:style   blog   color   io   ar   for   div   cti   sp   

原文地址:http://www.cnblogs.com/bjchenxn/p/3964093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!