您的位置：首页 > Web前端 > JavaScript

JavaScript实现复选框全选

2013-08-22 10:20 453 查看

方法一：

<script type="text/javascript">  
    function selectIt() {  
        form = document.lzyy  
        action = event.srcElement.name  
        for (var i = 0; i < form.elements.length; i++) {  
            if (form.elements[i].name == "checkbox") {  
                e = form.elements[i]  
                e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)  
                ////在这里 通过条件表达式?:来使每个框反选。朋友们可以好好思考一下。这种首先是一种实现方式。其二 还能是代码简练。哈哈 反正个人是喜欢这种方式拉。  
            }  
        }  
    }  
</script>

<form name="lzyy">
  <p class="STYLE1"> 全 选
    <input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt()">
    <br>
    反 选
    <input type="checkbox" name="invest" value="checkbox" onClick="selectIt()">
    <br>
    Item1
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item2
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item3
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item4
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item5
    <input type="checkbox" name="checkbox" value="checkbox">
  </p>
</form>

方法二：

<html>  
    <head>  
        <script type="text/javascript">  
            function checkEvent(name, allCheckId) {  
                var allCk = document.getElementByIdx_x(allCheckId);  
                if (allCk.checked == true) checkAll(name);  
                else checkAllNo(name);  
            }  
            //全选  
            function checkAll(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++)  
                    names[i].checked = true;  
                }  
            }  
            //全不选  
            function checkAllNo(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++)  
                    names[i].checked = false;  
                }  
            }  
            //反选  
            function reserveCheck(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++) {  
                        if (names[i].checked) names[i].checked = false;  
                        else names[i].checked = true;
                    }  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />  
        全选  
        <input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')" 
        />  
        反选  
        <br />  
        <input type="checkbox" name="ck" value="1" />  
        篮球  
        <br />  
        <input type="checkbox" name="ck" value="2" />  
        旅游  
        <br />  
        <input type="checkbox" name="ck" value="3" />  
        读书  
        <br />  
        <input type="checkbox" name="ck" value="4" />  
        美食  
        <br />  
        <input type="checkbox" name="ck" value="5" />  
        睡觉  
    </body>   
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航