Javascript知识【案例:复选框操作】

简介: 案例:复选框操作

复选框操作



为达到以上效果,我们需要获取所有的复选框元素对象,然后对checked属性进行操作即可



分析:


关键点:


获取指定复选框元素   document.getElementsByClassName

通过JS进行复选框的选中/取消选中

复选框对象.checked=true;//选中 (复选框对象.checked="checked";)


复选框对象.checked=false;//取消选中(复选框对象.checked="";)


<input type="checkbox" id="cb"/><br/>

<input type="button" value="点我选中" onclick="document.getElementById('cb').checked=true;"/>

<input type="button" value="点我取消选中" onclick="document.getElementById('cb').checked=false;"/>



步骤:


分别为三个按钮绑定点击事件

分别进行监听器的实现

//全选


//1、获取四个复选框


//2、遍历四个复选框,每遍历一个,将其checked属性设置为true


//全不选


//1、获取四个复选框


//2、遍历四个复选框,每遍历一个,将其checked属性设置为false


//反选


//1、获取四个复选框


//2、遍历四个复选框,每遍历一个,将其checked属性设置为取反值(!)


代码实现:


<script>

  window.onload=function (ev) {

     //1、获取四个复选框

     var arr = document.getElementsByClassName("itemSelect");

     document.getElementById("qx").onclick=function (ev1) {

        //全选

        //1、获取四个复选框

        //2、遍历四个复选框,每遍历一个,将其checked属性设置为true

        for (var i = 0; i <arr.length ; i++) {

           arr[i].checked = true;

        }

     };

     document.getElementById("qbx").onclick=function (ev1) {

        //全不选

        //1、获取四个复选框

        //2、遍历四个复选框,每遍历一个,将其checked属性设置为false

        for (var i = 0; i <arr.length ; i++) {

           arr[i].checked = false;

        }

     };

     document.getElementById("fx").onclick=function (ev1) {

        //反选

        //1、获取四个复选框

        //2、遍历四个复选框,每遍历一个,将其checked属性设置为取反值(!)

        for (var i = 0; i <arr.length ; i++) {

           arr[i].checked = !arr[i].checked;

        }

     };

  }

</script>


小结:


复选框.checked=true;//选中


复选框.checked=false;//取消选中


复选框.checked=!复选框.checked;//反选


相关文章
|
10天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
14天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
4天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
12 0
|
1天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
9 3
|
1天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
4天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
10 0
|
4天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
12 0
|
4天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
13 2
|
11天前
|
存储 缓存 JavaScript
【Web 前端】JS哪些操作会造成内存泄露?
【4月更文挑战第22天】【Web 前端】JS哪些操作会造成内存泄露?
|
14天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
23 2