用Dom方法和一般方法实现复选框的全选反选

最新推荐文章于 2023-02-10 11:10:59 发布
最新推荐文章于 2023-02-10 11:10:59 发布
阅读量363 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whjwhja6/article/details/8635180
版权

方法一：

 

<script type="text/javascript">

 function a(){

 for(var i=1;i<=3;i++){
  document.getElementById("a"+i).checked=true;
  }
 }
 function b(){

 for(i=1;i<=3;i++){
  document.getElementById("a"+i).checked=false;
  }
 }
 function c(){

 for(i=1;i<=3;i++){
  if(document.getElementById("a"+i).checked==false){
   document.getElementById("a"+i).checked=true;
   }else{document.getElementById("a"+i).checked=false;}
  }
 }
 

 
</script>
<body>
方法1
<table>
<tr>
<td><input type="checkbox" id="a1" >选中不</td>
<td><input type="checkbox" id="a2" >不选中</td>
<td><input type="checkbox" id="a3" >选不中</td></tr>
<tr><td><input type="button" value="全选" οnclick="a()"></td>
<td><input type="button" value="全部选" οnclick="b()"></td>
<td><input type="button" value="反选" οnclick="c()"></td></tr>
</table>

 

方法二：（Dom）

 

<script type="text/javascript">
 

 function aa(){
 var a=document.getElementsByName("a");
 for(var i=0;i<a.length;i++){
  a[i].checked=true;
  }
 }
 function bb(){
 var a=document.getElementsByName("a");
 for(var i=0;i<a.length;i++){
  a[i].checked=false;
  }
 }
 function cc(){
 var a=document.getElementsByName("a");
 for(var i=0;i<a.length;i++){
  
  if(a[i].checked){
  a[i].checked=false;
  }else
  {a[i].checked=true;}
  }
 }
 
</script>
<body>
<table>
<tr>
<td><input type="checkbox" name="a" >选中不</td><!--这只能用name -->
<td><input type="checkbox" name="a" >不选中</td>
<td><input type="checkbox" name="a" >选不中</td></tr>

<tr><td><input type="button" value="全选" οnclick="aa()"></td>
<td><input type="button" value="全部选" οnclick="bb()"></td>
<td><input type="button" value="反选" οnclick="cc()"></td></tr>
</table>

</body>
</html>


 

whjwhja6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端简单入门第十三讲 使用JavaScript完成复选框的全选和全不选的效果
李阿昀的博客
05-05 2182
使用JavaScript完成复选框的全选和全不选的效果真实项目开发中少不了这样的需求：在实际的开发中一条记录一条记录地进行删除的话，效率很低，而我们有的时候需要一起删除多条记录，那么就需要通过在表格之前设置一个复选框的形式进行勾选复选框，然后点击一个删除的按钮就能进行批量删除了。效果类似如下： 下面直接用一个例子来进行讲解，按如下步骤来使用JavaScript完成复选框的全选和全不选的效果：
javascript用DOM实现 复选框的全选、反选、全不选
永不停歇
03-04 2352
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function qx(){  for(var i=0;i     var ck=document.getElementsByName("ck");   ck[i].checked=tr
DOM复选框全选和反选
贪吃ღ大魔王
04-17 146
DOM复选框全选和反选 实现代码 手打： <style type="text/css"> table { margin: 100px auto; border-collapse: collapse; } td, th { text-align: left; width: 120px; height: 30px; border: 1px solid palegreen; } </style>
DOM编程-复选框的全选和取消全选
heliuerya的博客
02-10 519
复选框的全选和取消全选
09-Dom操作复选框（全选、全不选、反选）
高调做事，低调做人！
10-08 1560
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> Insert title here 您的爱好很广泛！！！ 全选/全不选
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
jQuery实现复选框的全选和反选
10-20
在本文中，我们将深入探讨如何使用 jQuery 实现复选框的全选、反选以及反转功能。 首先，我们来看一下提供的 HTML 代码段，它定义了一个简单的表单，包含三个复选框（苹果、香蕉、橘子）以及三个按钮（全选、全不选...
js html css实现复选框全选与反选
11-23
总结一下，这个例子展示了如何结合使用HTML、CSS和JavaScript来创建一个复选框全选和反选的交互式用户界面。JavaScript的核心在于动态改变DOM元素的属性，而HTML提供了用户界面的基础结构，CSS则用于美化这些元素。...
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
复选框全选反选取消
06-01
在网页交互设计中，"复选框全选反选取消"功能是常见...总结，"复选框全选反选取消"功能利用jQuery简化了DOM操作，实现了用户友好的交互体验。通过理解和应用这些知识点，开发者可以创建更高效、更易于操作的前端界面。
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
HTML页面利用JavaScript实现全选
04-13 740
<br />代码如下：<br /><html><br /><title><br />全选按钮<br /></title><br /><script language="javascript"><br />function select_all(flag){<br /> var k;<br />    if(document.all("sel") != null){<br />         k = document.all("sel").length ;<br />         //alert(k);
DOM操作案例之--全选与反选
CSDN_1999的博客
12-11 241
全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。 下面我只就用一个简单的案例做个演示吧。 <div class="wrap"> <table> <thead> <tr> <th> &lt...
dom中实现全选复选框的实例。
weixin_30955617的博客
10-19 210
PS：这个题考试时没有做出来，摘录下来好好作为实例。 <script type="text/javascript"> //2、实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选 //全选/全不选 /* 1、找到全选框 ...
html 使用js中dom对象完成复选框的 全选，取消全选和反选
雁迟的博客
01-07 539
使用dom对象完成复选框的反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用dom对象完成复选框的反选</title> <script>
DOM操作checkbox（全选/反选/全不选）
starrysky的专栏
07-01 1468
check.html                        您的爱好很广泛!!!       全选/全不选           保龄球   篮球   跑步   唱歌                     window.onload=function(){    //    document.getElementById(
全选反选（框）
...
09-01 215
全选反选（框） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全选反选（框）</title> <style> * { padding: 0; margin: 0; } .wrap { w
一、实现全选/全部选/反选按钮功能
weixin_33686714的博客
10-18 862
一、效果演示 请选择你所掌握的语言： 全选/全不选 Java JavaScript php Python 二、源码展示 <script type="application/javascript"> $().ready(function(){ //选择所...
DOM实现全选、反选、取消
likunkun__的博客
02-12 712
需求：经常看到网页上有全选、反选等等按钮，我们用DOM实现。 JQuery实现参照：jQuery实现全选、反选、取消 简单写一个表格和选中框： 忽视掉“添加按钮” 直接上代码：在JavaScript代码里 有详细的注释 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UT...
jsp实现复选框的全选与反选
最新发布
05-12
在 JSP 中实现复选框的全选与反选，可以通过 JavaScript 来实现。以下是一个简单的示例代码： ```html <html> <head> <script type="text/javascript"> function checkAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function uncheckAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } function invertSelection() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <form> <input type="checkbox" name="checkbox" value="1">选项1 <input type="checkbox" name="checkbox" value="2">选项2 <input type="checkbox" name="checkbox" value="3">选项3 <br> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="invertSelection()"> <input type="button" value="全不选" onclick="uncheckAll()"> </form> </body> </html> ``` 在这个例子中，我们使用了 JavaScript 来实现三个函数：`checkAll()`、`uncheckAll()` 和 `invertSelection()`。这些函数分别对应“全选”、“全不选”和“反选”按钮的点击事件。 `document.getElementsByName('checkbox')` 通过 name 属性获取所有复选框的 DOM 对象，然后使用循环遍历每个复选框，来实现全选、全不选和反选的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值