javascript复选框学习

lihu5841314 · 发表于 2021-7-11 10:27

本帖最后由 lihu5841314 于 2021-7-11 16:06 编辑

[Asm] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
<!--    1.第一个选择 就全选或者全部取消  -->
<!--    2.当全部选中时候复选框选中否则取消  判断所以复选框的状态是否为全部选中 全部复选框的点击后状态就要提取全部复选框-->
<!--1.给全部复选框创建单击事件   2.判断复选框的选中的个数是否等于总数-->
    <script type="text/javascript" >
        window.onload=function (){
        //    1.选择就要有点击事件 获取第一复选框的元素对象
            var firstchk=document.getElementById("firstchk")
            var aihaos = document.getElementsByName("aihao")
            firstchk.onclick=function (){
            //全选  就要获得所以元素  每个复选框都有相同的name属性   判断复选框的状态  checkbox有个checked属性
                //代码优化 因为if的判断条件是firstchk.checked是点击时候的状态
                for(i=0;i<aihaos.length;i++){
                aihaos[i].checked=firstchk.checked
                }
                // if(firstchk.checked===true){
                // for(i=0;i<aihaos.length;i++){
                // aihaos[i].checked=true
                // }
                // }else{
                // //全不选
                // for(i=0;i<aihaos.length;i++){
                // aihaos[i].checked=false}
                // }
            }
            var all = aihaos.length
            for(i=0;i<aihaos.length;i++){
            aihaos[i].onclick=function (){
                var checkedcount = 0
                for(i=0;i<aihaos.length;i++){
                    if(aihaos[i].checked===true){
                        checkedcount++}

                    firstchk.checked=(checkedcount===all)
                    // if(checkedcount===all){
                    // firstchk.checked=true
                    // }else{firstchk.checked=false}
                    // }

        }}}}

    </script>
    <input  type="checkbox" id="firstchk" ><br>
            <input  type="checkbox" name="aihao" value="yu" >语文<br>
            <input  type="checkbox" name="aihao" value="sx" >数学<br>
            <input  type="checkbox" name="aihao" value="yy" >英语<br>
            <input  type="checkbox" name="aihao" value="sw" >生物<br>
</body>
</html>

chenkeai深蓝 · 发表于 2021-7-11 10:35

有点web基础的看起来就好得多

yushangwl · 发表于 2021-7-11 10:49

java？？？

lihu5841314 · 发表于 2021-7-11 10:50

yushangwl 发表于 2021-7-11 10:49
java？？？

javaScript 和java 没毛线关系

Takitooru · 发表于 2021-7-11 11:08

lihu5841314 发表于 2021-7-11 10:50
javaScript 和java 没毛线关系

楼上这位兄弟的意思指这里
你也知道Java跟javascript没有任何关系，但是你分类错误了

侃遍天下无二人 · 发表于 2021-7-11 13:58

这还需要专门写成笔记发出来，在浏览器调试工具里面自己捣鼓几下不就好了吗，更何况你还把java和javascript搞混了，赶紧多加点内容丰富一下吧，建议顺便教学一下怎么使用调试工具复现你的代码

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] javascript复选框学习