JavaScript的基础应用之复选框

缺乏、安全感 2022-06-07 03:44 227阅读 0赞

本篇要学的知识就比较简单了，是对JavaScript中复选框的应用。

掌握复选框的全选和反选。

单选框和复选框比较类似 一般是一组为单位使用 使用的时候，name属性 一组是一样的。 全选、反选

示例图：

![Center][]

![Center 1][]

源码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>复选框</title>
         </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>

[Center]: /images/20220607/06f4dcaccfce46eaae91dd3e65577993.png
[Center 1]: /images/20220607/6e84b8115dec4203bd4e7e6d75331e3b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 40-JavaScript-折叠与显示-复选框的简单应用

1. 折叠与显示通过 display=none | block 来隐藏和显示 ![SouthEast][] <body>

小鱼儿/ 2022年09月19日 00:23/ 0 赞/ 101 阅读

相关 JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和[操作radio][radio]的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元

系统管理员/ 2022年08月07日 06:53/ 0 赞/ 314 阅读

相关 JavaScript的基础应用之复选框

本篇要学的知识就比较简单了，是对JavaScript中复选框的应用。掌握复选框的全选和反选。单选框和复选框比较类似一般是一组为单位使用使用的时候，name属

缺乏、安全感/ 2022年06月07日 03:44/ 0 赞/ 228 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 356 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 298 阅读

相关 JavaScript_之复选框

UI界面样式 HTML界面实现代码 <!DOCTYPE html>： <html> <head> <srcipt type="text/

向右看齐/ 2022年05月01日 12:56/ 0 赞/ 298 阅读

相关 javascript复选框的选择

复选框 <body> <input type="checkbox" id="dianji" checked="checked">

逃离我推掉我的手/ 2022年02月03日 06:36/ 0 赞/ 278 阅读

相关 JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做

落日映苍穹つ/ 2022年01月13日 07:19/ 0 赞/ 481 阅读

相关 javascript根据字符串选中复选框

使用javascript初始化页面数据，根据内容选中复选框。在页面信息需要根据后台返回数据调整页面使用。以下为笔记代码作为记录： <script type="

清疚/ 2021年09月15日 16:34/ 0 赞/ 427 阅读

相关 JavaScript 复选框全选功能案例

功能描述实现一个多栏目复选框的全选，全不选和反选功能。 ![在这里插入图片描述][20190418123707102.png] 分析 HTML页面：四

Love The Way You Lie/ 2021年06月24日 16:10/ 0 赞/ 552 阅读