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


相关文章
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
10月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
292 16
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
217 1
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
137 11
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
197 0
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
649 0
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本

热门文章

最新文章