JavaScript操作checkbox复选框

网站的首页怎样设计才能让用户喜欢上你的网站？
一个网站最重要的访问页面或许就是首页了，因为首页是大多数用户在访问你的网站时看到的第一个页面。而且，在网站优化时，外链中留下的链接也几乎都是首页的链接，所以，对于如此重要

JavaScript操作checkbox的方式和操作radio的方式相似，都是行使元素项的checked属性来完成。先获取checkbox元素聚集，遍历聚集，对聚集中的每一项做操作。这里讲几个常用的checkbox复选框的常见示例。取值

<body>  
    <p>  
        <label for="hobby">Hobby:    
            <input type="checkbox" name="hobby" value="reading" />阅读    
            <input type="checkbox" name="hobby" value="climbing" />爬山    
            <input type="checkbox" name="hobby" value="running" />跑步    
            <input type="checkbox" name="hobby" value="fishing" />钓鱼    
            <input type="checkbox" name="hobby" value="cooking" />做饭    
            </br></br>  
            <input type="button" value="Get Value" onclick="getValue()" />  
        </label>  
    </p>  
</body>

要获取多选框的值，该怎么处置呢？跟获取radio单选按钮值的步骤相同。 1 获取复选框元素聚集 2 遍历复选框元素 3 将选中的复选框的值拼接出来，返回

function getValue(){  
    var hobbies = document.getElementsByName("hobby");  
    var value;  
    for (i=0; i<hobbies.length; i++){  
        if (hobbies[i].checked){  
            if (!value){  
                value = hobbies[i].value;  
            } else {  
                value += "," + hobbies[i].value;  
            }  
        }  
    }  
      
    alert(value == undefined ? '' : value);  
}

这里我们将复选框值拼接出来，之间用“，”离开，返回的时刻，若是没有选中，则返回空字符串，而非JavaScript的默认空值undefined。全选全选是复选框中常见的一个操作，选中所有的选项。全选也是基于checked属性的操作，遍历所有的元素项，

网站在改版的时候如何避免降权问题
正常的网站页面发展过程中毫无疑问网站是需要做改版的，可是你了解网站改版的一些常见问题吗?还是回答一场说改就改的实际操作。在我们给客户做网站优化的工作中发现，许多网站

将每一个元素项的checked属性都置为true。

<body>  
    <p>  
        <label for="hobby">Hobby:    
            <input type="button" name="selectAll" value="selectAll" onclick="selectAll()" />全选    
            <input type="button" name="selectOther" value="selectOther" onclick="selectOther()" />反选  
            </br></br>  
            <input type="checkbox" name="hobby" value="reading" />阅读    
            <input type="checkbox" name="hobby" value="climbing" />爬山    
            <input type="checkbox" name="hobby" value="running" />跑步    
            <input type="checkbox" name="hobby" value="fishing" />钓鱼    
            <input type="checkbox" name="hobby" value="cooking" />做饭    
            </br></br>  
            <input type="button" value="Get Value" onclick="getValue()" />  
        </label>  
    </p>  
</body>

全选时，首先需要判断当前复选框是否处于全选的状态，然后再适时的全选，或全不选。判断是否处于全选状态：true，全选；false，非全选

function isSelectAll(){  
    var hobbies = document.getElementsByName("hobby");  
    for (i=0; i<hobbies.length; i++){  
        if (!hobbies[i].checked){  
            return false;  
        }  
    }  
    return true;  
}

全选操作

function selectAll(){  
    var hobbies = document.getElementsByName("hobby");  
    if (isSelectAll()){  
        for (i=0; i<hobbies.length; i++){  
            hobbies[i].checked = false;  
        }  
    } else {  
        for (i=0; i<hobbies.length; i++){  
            hobbies[i].checked = true;  
        }  
    }  
}

反选反选的操作即选中那些当前没有被选中的项，并将当前选中的项作废。

function selectOther(){  
    var hobbies = document.getElementsByName("hobby");  
    for (i=0; i<hobbies.length; i++){  
        if (hobbies[i].checked){  
            hobbies[i].checked = false;  
        } else {  
            hobbies[i].checked = true;  
        }  
    }  
}

上面几个例子，都是本人今天没事写的玩的，内里可能有些操作不是很相符客户体验，若是您有更好的方案，可以提出来。但就通过上面的示例，应该能很好的明晰checkbox了吧。着实 checkbox和radio一样，都是基于checked属性，对它们的操作就是对checked属性的操作，手艺checked属性就可以了。

如何基于用户体验来设计人机交互效果
网站想要提升用户体验有很多方法，人机交互内容就是其中之一。在前些年，由于一些技术的限制，导致这一内容的添加具有很大的困难，但现在随着各项技术的兴起，人机交互的设计已经不存

转载请说明出处内容投诉
八爷源码网 » JavaScript操作checkbox复选框

网站源码

分享到：