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

javascript复选框学习

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

<!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.checked=firstchk.checked
                }
                // if(firstchk.checked===true){
                // for(i=0;i<aihaos.length;i++){
                // aihaos.checked=true
                // }
                // }else{
                // //全不选
                // for(i=0;i<aihaos.length;i++){
                // aihaos.checked=false}
                // }
            }
            var all = aihaos.length
            for(i=0;i<aihaos.length;i++){
            aihaos.onclick=function (){
                var checkedcount = 0
                for(i=0;i<aihaos.length;i++){
                  if(aihaos.checked===true){
                        checkedcount++}

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

      }}}}

    </script>
    <inputtype="checkbox" id="firstchk" ><br>
            <inputtype="checkbox" name="aihao" value="yu" >语文<br>
            <inputtype="checkbox" name="aihao" value="sx" >数学<br>
            <inputtype="checkbox" name="aihao" value="yy" >英语<br>
            <inputtype="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没有任何关系,但是你分类错误了

https://z3.ax1x.com/2021/07/11/W9FqI0.png

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

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