JavaScript 之复选框

最新推荐文章于 2024-07-12 22:03:30 发布

一坨英俊的屎

最新推荐文章于 2024-07-12 22:03:30 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/wq857260622/article/details/78471681

版权

本文主要的知识是对 JavaScript 中的复选框的应用

掌握复选框的全选和反选

单选框和复选框比较类似

一般是一组为单位使用

使用的时候 name 属性一组是一样的。

全选、反选

示例图：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>复选框</title>
    <!--
       单选框和复选框比较类似
       一般是一组为单位使用
          使用的时候，name属性 一组是一样的。

       全选、反选
    -->
</head>

<body>
<input type="button" value="全选" οnclick="quan()"/>
<input type="button" value="反选" οnclick="fan()"/>
<input type="checkbox" name = "ball" value="篮球"/>篮球
<input type="checkbox" name = "ball" value="足球"/>足球
<input type="checkbox" name = "ball" value="排球"/>排球
<input type="checkbox" name = "ball" value="玻璃球"/>玻璃球
<script type="text/javascript">
    function quan(){
        //获取所有的复选框
        //getElementsByName  根据名字获取节点数组
        //遍历节点
        var cs = document.getElementsByName("ball");
        //将状态置为选中
        //checked 选中状态  true/false
        for ( var i = 0; i < cs.length; i++) {
            cs[i].checked = true;
        }
    }
    //反选
    function fan(){
        var cs = document.getElementsByName("ball");
        //将状态置为选中
        //checked 选中状态  true/false
        for ( var i = 0; i < cs.length; i++) {
            cs[i].checked = !cs[i].checked;
        }
    }
</script>
</body>
</html>

一坨英俊的屎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 之复选框

本文主要的知识是对 JavaScript 中的复选框的应用掌握复选框的全选和反选单选框和复选框比较类似一般是一组为单位使用使用的时候 name 属性一组是一样的。全选、反选示例图：代码如下：复选框 <!-- 单选框和复选框比较类似一般是一组为单位使用
复制链接

扫一扫