当前位置 : 主页 > 网络编程 > JavaScript >

实现复选框的全选与取消

来源:互联网 收集:自由互联 发布时间:2021-07-03
!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title全选与全不选/title/headbodyform 请选择你爱好:br input type="checkbox" name="hobby" id="hobby1" 音乐 input type="checkbox" name="hobby" id="hobby2" 登山 input type="ch
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选与全不选</title>
</head>
<body>
<form>
    请选择你爱好:<br>
    <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">  跑步 <br>
    <input type="button" value = "全选" onclick = "checkall();">
    <input type="button" value = "全不选" onclick = "clearall();">
    <p>请输入您要选择爱好的序号,序号为1-6:</p>
    <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>

网友评论