实现复选框的全选与取消代码,Js代码库,德仔网

代码语言

代码分类

【Js】实现复选框的全选与取消

作者:泰鑫 / 发布于2016/4/6/ 991

通过ducument.getElementsByName()方法实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选与全不选</title>
</head>
<body>
<form>
    请选择你爱好:
    <input type="checkbox" name="hobby" id="hobby1">  音乐
    <input type="checkbox" name="hobby" id="hobby2">  登山
    <input type="checkbox" name="hobby" id="hobby3">  游泳
    <input type="checkbox" name="hobby" id="hobby4">  阅读
    <input type="checkbox" name="hobby" id="hobby5">  打球
    <input type="checkbox" name="hobby" id="hobby6">  跑步 
    <input type="button" value = "全选" onclick = "checkall();">
    <input type="button" value = "全不选" onclick = "clearall();">
    请输入您要选择爱好的序号，序号为1-6:
    <input id="wb" name="wb" type="text" >
    <input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
    function checkall(){
        var hobby = document.getElementsByTagName("input");
        //alert(hobby.length);
        for(var i= 0,j = 6;i<j;i++)
        {
            hobby[i].checked = true;
        }
    }
    function clearall(){
        var hobby = document.getElementsByName("hobby");
        //alert(hobby.length);
        for(var i= 0,j=hobby.length;i<j;i++)
        {
            hobby[i].checked = false;
        }
    }
 
    function checkone(){
        clearall();
        var j=document.getElementById("wb").value;
        document.getElementById("hobby"+j).checked = true;
    }
</script>
</body>
</html>

试试其它关键字

　复选框　

同语言下

可能有用的

泰鑫贡献的其它代码(14)