新手小白问个简单的有关问题。关于checkbox全选全不选的有关问题-JavaSript-爱易网页

新手小白问个简单的有关问题。关于checkbox全选全不选的有关问题

日期：2014-05-16　浏览次数：20683 次

新手小白问个简单的问题。关于checkbox全选全不选的问题。
先简单说下。
有一个是全选的checkbox，ID叫做"all"。

JScript code


<input id="all" type="checkbox" value="全选" onclick="choiceall()" />

其他的checkbox，name都是"product"。

JScript code


<input name="product" type="checkbox" value="1" onclick="judgethechoice()" />
<input name="product" type="checkbox" value="2" onclick="judgethechoice()" />
<input name="product" type="checkbox" value="3" onclick="judgethechoice()" />
<input name="product" type="checkbox" value="4" onclick="judgethechoice()" />

下面是我写的两个方法。用于全选和全不选。

JScript code


function choiceall()
{
    var getall=document.getElementById("all");
    var getproduct=document.getElementsByName("product");
    for(i=0;i<getproduct.length;i++)
    {
        if(getall.checked==true)
        getproduct[i].checked=true;
        else
        getproduct[i].checked=false;
    }
    
}

function judgethechoice()
{
    var getall=document.getElementById("all");
    var getproduct=document.getElementsByName("product");
    for(i=0;i<getproduct.length;i++)
    {
        if(getproduct[i].checked==false)
        getall.checked=false;
        if(getproduct[i].checked==true&&getall.checked==false)
        getall.checked=true;
    }
}

第一个方法主要用于全选和全不选；
第二个方法的意思是如果我先勾了全选，然后取消掉下面任意一个，全选的那个勾也会消失。
同理，如果我先不勾全选。当我把下面四个内容依次勾上后，全选也跟着勾上。

我想问的是。有没有什么更简单的方[code=JScript][/code]法？！
还有就是。有没有可能将这两个方法写成一个方法。

求赐教。。

------解决方案--------------------

HTML code




<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>

        <style>
        
        </style>
    </head>
    <body>
        全选<input id="all" type="checkbox" value="全选" />
        <br />
        <input name="product" type="checkbox" value="1" />    
        <input name="product" type="checkbox" value="2" />    
        <input name="product" type="checkbox" value="3" />    
        <input name="product" type="checkbox" value="4" />    
        <script>
            ;(function(){
                var all = document.getElementById('all');
                var objs = document.getElementsByName('product');
                var len = objs.length;
                document.onclick = function(e){
                    e = window.event || e;
                    var t = e.srcElement || e.target;
                    var name = t.tagName.toLowerCase();
                    if( name == 'input' && t.type == 'checkbox' ){
                        if( t.id == 'all' ){
                            var flag = t.checked;
                            for(var i = 0; i < len; i++){
                                if( flag ){
                                    objs[i].checked = true;
                                }else{
                                    objs[i].checked = false;
                                }    
                            }
                        }else if( t.name == 'product' ){

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

新手小白问个简单的有关问题。关于checkbox全选全不选的有关问题

相关资料更多>

推荐阅读更多>