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;//反选


相关文章
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
1月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
49 1
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
3月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
42 11
|
3月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
86 2
一个案例带你从零入门Three.js,深度好文!
|
3月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
193 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例