js全选不选反选

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量191 收藏
点赞数 1
<!DOCTYPE html>
<html>
     <head><meta charset= "UTF-8" ></head>
     <body>
         <div id= "div" >
             <input type= "checkbox"  /><br />
             <input type= "checkbox"  /><br />
             <input type= "checkbox"  /><br />
         </div>
         <input type= "button"  value= "全选"  onclick= "CheckAll()" /><br />
         <input type= "button"  value= "不选"  onclick= "UnCheck()" /><br />
         <input type= "button"  value= "反选"  onclick= "othercheck()" /><br />
         <script>
             var  CheckBox=div.getElementsByTagName( 'input' );
             
             //全选
             function  CheckAll(){
                 for (i=0;i<CheckBox.length;i++){CheckBox[i].checked= true ;};
             };
             
             //不选
             function  UnCheck(){
                 for (i=0;i<CheckBox.length;i++){CheckBox[i].checked= false ;};
                 };
             
             //反选
             function  othercheck(){
                 for (i=0;i<CheckBox.length;i++){
                     if (CheckBox[i].checked== true ){ CheckBox[i].checked= false ;}
                     else { CheckBox[i].checked= true }
                 }
             };
         </script>
     </body>
</html>
貌似孺子牛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单js实现全选全部选反选效果
11-11
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 2450
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
【JS】全选全不选反选
xxxxxwxx的博客
08-23 470
点击全选和反选实现对应功能，在全选状态下取消选中其中一个，全选按钮取消选择状态，四个全选中时，全选按钮自动选择。
js 全选 不选 反选
angwan1774的专栏
02-06 82
js实现 全选 不选 反选 思路： 1，获取元素 2，给全选 不选 反选添加点击事件 3，用for循环checkbox 4，把checkbox的checked设置为true即实现全选 5，把checkbox的checked设置为false即实现不选 6，通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为fal...
前端案例-全选全不选与反选
Admin_76的博客
10-23 447
前端全选与全不选思路分析。
JS全选与反选
qq_34082921的博客
09-10 1571
【代码】JS全选与反选的代码实现。
原生JavaScript全选、全不选、反选实例
weixin_46920847的博客
01-31 344
全选：用户点击，在标签上添加已选中的属性，即checked = true。 全不选：用户点击，在标签上移除checked的属性，即checked=false。 反选：用户点击，使用户原先点击的变为不点击的，用户原先不点击的变为点击的，即checked=!checked。 三者所做操作基本一致，考虑封装为函数作为后续使用。 页面布局：后续可换成任何自己需要的布局。 <form> <div><input type="checkbox">多选1</div> &l
JS实现全选、全不选、反选
csdnid_0001的博客
10-31 214
JS实现全选、全不选、反选、CheckBox复选框、按钮
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 776
利用JS写了一个相对简单的全选和反选功能。
javascript的全选、反选、全不选
weixin_41804506的博客
06-12 800
记录，js的全选，全不选，反选功能。
全选不选反选jquery
05-20
"全选不选反选"是网页表单中常见的功能，用户可以通过点击一个按钮实现对复选框的批量选择、取消选择或者反向选择。在jQuery中实现这一功能，主要涉及DOM操作、事件处理和数组方法。 首先，我们需要理解DOM...
JS实现的全选、全不选及反选功能【案例】
10-17
总结来说，实现JS的全选、全不选和反选功能的关键在于理解DOM操作、事件监听以及属性的动态修改。通过这些基础概念，我们可以轻松地处理用户交互，提高网站或应用程序的用户体验。在实际开发中，这种功能广泛应用于...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
基于Android音乐播放器设计与实现2.docx
最新发布
08-10
基于Android音乐播放器设计与实现2.docx
java基于ssm+jsp省出口基地公共信息服务平台系统源码 带毕业论文
08-10
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java spider.rar
08-10
java spider.rar
ASP校园学生信息在线管理系统设计(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
html全选全不选反选
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> <html> <head> <title>全选</title> <script type="text/javascript"> function selectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = true; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全选" onclick="selectAll()"> </form> </body> </html> ``` 2. 全不选效果 ```html <!DOCTYPE html> <html> <head> <title>全不选</title> <script type="text/javascript"> function unselectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = false; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全不选" onclick="unselectAll()"> </form> </body> </html> ``` 3. 反选效果 ```html <!DOCTYPE html> <html> <head> <title>反选</title> <script type="text/javascript"> function reverseSelect(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="反选" onclick="reverseSelect()"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值