使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果

最新推荐文章于 2022-04-25 23:46:45 发布
最新推荐文章于 2022-04-25 23:46:45 发布
阅读量4.4k 收藏 5
点赞数 2
分类专栏： java web 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hokinhu/article/details/77340840
版权
<!DOCTYPE html>
<html>
<!--
    作者：18883362590@163.com
    时间：2017-08-17
    描述：使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果

    -->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" id="ckall" οnclick="checkall()"  />全选</td>
<td>复选框全选实例</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />1</td>
<td>作用：</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />2</td>
<td>a.单机列头复选框全选或全不选</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />3</td>
<td>c.当所有子项目选中时，列头复选框自动设置为选中状态</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />4</td>
<td>d.将复选框反过来选</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" id="creverse" οnclick="reverse()" />反选</td>
<td>反选实例</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
</table>
<script>
function checkall(){
var flag=document.getElementById("ckall").checked;
var ho=document.getElementsByName("box");
for(var i=0;i<ho.length;i++){
ho[i].checked=flag;
}
}
function reverse(){
var ho=document.getElementsByName("box");
for(var i=0;i<ho.length;i++){
ho[i].checked=!ho[i].checked;
}
}
</script>
</body>
</html>
hokinhu
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js html css实现复选框全选与反选
11-23
本文实例为大家分享了js复选框全选与反选实现代码，供大家参考，具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="js,笔试题目" /> <style type="text/css"> table,tr,td { border:1px solid red; } </style> <script type
实现table表格checkbox复选框的全选 反选
11-11
在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。
使用Html+Css+js技术编写一个完整的表格列表内容中 实现 复选框的全选 反选效果
LL__Sunny的博客
12-18 2229
使用Html+Css+js技术编写一个完整的表格列表内容中 实现 复选框的全选 反选效果 1. 具体实现要求如下： （1）当全选框按钮选中时：将所有的内容项前面的复选框选中，否则反之。 （2）当反选框按钮选中时：将所有的内容项前面的未选中的复选框选中，选中的复选框置为没选中，否则反之。 2. ヾ(≧▽≦*)o来让我们来看看最终的效果图： 3. 等不及了吧直接给出代码了 （1）body部分 &l...
使用Html+Css+js技术编写一个完整的表格列表内容中 复选框的全选、反选效果
aigo_2021的博客
04-25 1497
使用Html+Css+js技术编写一个完整的表格列表内容中 复选框的全选、反选效果，效果如下所示： 代码实现： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <style> <!--使用CSS设置表格底色--> #color1{backg...
使用Html+JavaScript实现复选框功能----全选/反选
05-22 306
一、Html>body部分: <body> <table border="1" width="60%"> <tr> <td><input type="checkbox" name="all"/>全选</td> <td>复选框示例</td> </tr> ...
js-复选框的全选，反选，不选
xiaobai12123的博客
12-08 250
实现复选框的全选，反选，取消功能 效果图 点击’全选’，全部选中，点击’全不选’，全部不选，点击’反选’，选择未选的代码如下 <!DOCTYPE html> <html> <head> <title>复选框变换</title> <script type="text/javascript"> function allof() {
javascript实现复选框全选或反选
10-20
javascript实现复选框全选或反选的知识点涵盖了JavaScript基础编程、DOM操作、事件处理以及逻辑判断等方面。以下详细说明这些知识点： 1. JavaScript基础编程： JavaScript是一种动态的、解释型的编程语言，主要...
jQuery实现复选框checkbox全选、反选功能.rar
07-10
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
树结构 复选框 多选 全选功能
07-18
在IT领域，尤其是在前端开发中，"树结构 复选框 多选 全选功能"是一个常见的交互设计模式，广泛应用于数据管理、文件系统、菜单导航等场景。这一功能的实现涉及到数据结构、事件处理、状态管理等多个方面的技术。 ...
jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计
08-14
在这个项目中，我们关注的是使用jQuery来实现一些特定的功能，这些功能包括复选框的操作（全选、反选、取消选择）以及购物车中的商品价格统计。 首先，让我们深入了解一下复选框的操作。在HTML中，复选框是通过`...
index_test.html（在table表格结构中，多级复选框的勾选操作，当前示例为三级勾选操作。）
06-16
在table表格结构中，多级复选框的勾选操作，当前示例为三级勾选操作。
原生JS表格列表全选反选单选多选代码.zip
07-11
这是一款原生JS实现的，点击表格列表选中，可以单选、多选、全选和反选的表格列表选择代码。 js代码 [removed]  var all = document.getElementById("j_cbAll");  var tbody = document.getElementById("j_tb");  var checkboxs = tbody.getElementsByTagName("input");  all.onclick = function() {      for (var i = 0; i < checkboxs.length; i ) {          var checkbox = checkboxs[i];          checkbox.checked = this.checked;      }  };  for (var i = 0; i < checkboxs.length; i ) {      checkboxs[i]. {          var isCheckedAll = true;          for (var i = 0; i < checkboxs.length; i ) {              if (!checkboxs[i].checked) {                  isCheckedAll = false;                  break;              }          }          all.checked = isCheckedAll;      };  }  [removed]
JS简单表格列表全选反选代码.zip
07-05
JS简单表格列表全选反选代码，原生JS，点击表头按钮，实现全选、反选操作，实用的网页代码。
原生JS表格列表全选反选代码.zip
07-05
原生JS表格列表全选反选代码是一款点击表格列表选中，可以单选或者全选。
javascript 可以全选反选删除的表格(比较全面的操作了表格)
limlimlim的专栏
01-29 2010
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     可以全选反选删除的表格             body,table         {             margin:0;             padding:0;
复选框全选/反选效果实现
songwan21的博客
04-15 281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框全选/反选效果实现</title> </head> <body> <dl> <dt><input type="check...
js实现复选框全选和反选功能
u014033756的专栏
10-29 464
自己做的一个简单的全选反选实现 全选 反选 --> 全选 反选reserve Do you like summer? Do you like summer? Do you like summer? Do you like summer? Do you like summer? Do you like su
js实现复选框的多选，全选，反选
qq_507653349的博客
11-13 528
多选，全选，反选js实现复选框的多选，全选，反选 js实现复选框的多选，全选，反选 &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;input type="checkbox" name="chkAllResourceType" id="chkAllResourceType" onclick="sel
js中checkbox中的全选和反选效果实现
weixin_39320717的博客
08-02 412
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> script type="text/javascript"> //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选方法 function change()
js实现复选框全选反选
最新发布
04-09
可以使用以下Javascript代码实现复选框全选反选： 全选： ``` function selectAll(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i<checkboxes.length;i++){ checkboxes[i].checked = true; } } ``` 反选： ``` function selectReverse(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i<checkboxes.length;i++){ checkboxes[i].checked = !checkboxes[i].checked; } } ``` 其中"name"属性为"checkbox"的是复选框对象，请根据实际情况修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值