js实现全选与反选

最新推荐文章于 2023-08-31 21:11:30 发布
最新推荐文章于 2023-08-31 21:11:30 发布
阅读量384 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOVEWUST/article/details/50379955
版权
<!DOCTYPE HTML> 
<html> 
<head> 
<title>js实现全选与反选 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script language="javascript"> 
// --列头全选框被单击--- 
function ChkAllClick(sonName, cbAllId){ 
var arrSon = document.getElementsByName(sonName); 
var cbAll = document.getElementById(cbAllId); 
var tempState=cbAll.checked; 
for(i=0;i<arrSon.length;i++) { 
if(arrSon[i].checked!=tempState) 
arrSon[i].click(); 
} 
} 


// --子项复选框被单击--- 
function ChkSonClick(sonName, cbAllId) { 
var arrSon = document.getElementsByName(sonName); 
var cbAll = document.getElementById(cbAllId); 
for(var i=0; i<arrSon.length; i++) { 
if(!arrSon[i].checked) { 
cbAll.checked = false; 
return; 
} 
} 
cbAll.checked = true; 
} 


// --反选被单击--- 
function ChkOppClick(sonName){ 
var arrSon = document.getElementsByName(sonName); 
for(i=0;i<arrSon.length;i++) { 
arrSon[i].click(); 
} 
} 
</script> 
</head> 


<body> 
<form name="form1" method="post" action=""> 
<table width="500" border="1"> 
<tr bgcolor="#FFFF66"> 
<td> 
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td> 
<td align="center">复选框全选示例 </td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' οnclick="ChkSonClick('chkSon','chkAll')" />1</td> 
<td> 作用： </td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' οnclick="ChkSonClick('chkSon','chkAll')" />2</td> 
<td> a.单击列头复选框全选或全不选子项 </td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' οnclick="ChkSonClick('chkSon','chkAll')" />3</td> 
<td> b.只要有一个子项没有选中，则取消列头的选中状态 </td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' οnclick="ChkSonClick('chkSon','chkAll')" />4</td> 
<td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' οnclick="ChkSonClick('chkSon','chkAll')" />5</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' οnclick="ChkSonClick('chkSon','chkAll')" />6</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' οnclick="ChkSonClick('chkSon','chkAll')" />7</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' οnclick="ChkSonClick('chkSon','chkAll')" />8</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' οnclick="ChkSonClick('chkSon','chkAll')" />9</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' οnclick="ChkSonClick('chkSon','chkAll')" />10</td> 
<td>d.将复选框反过来选</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr bgcolor="#66FFFF"> 
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td> 
<td align="center">反选示例</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
</table> 
</form> 
</body> 
</html>
LOVEWUST
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js全选和反选
noShutdown的博客
03-01 256
js代码 function testAllCheckbox() { //获得checkbox列表 var boxs = document.getElementsByName(&amp;amp;quot;check&amp;amp;quot;); //获得按钮的对象 var all = document.getElementById(&amp;amp;quot;...
js-全选反选效果
凌风少年z
05-01 549
全选反选效果在很多网页都能见到，那具体代码是怎样的呢，在这里简单介绍一下两种方式js，jquery： 工具：WebStorm等 前提：熟悉html，css，JavaScript，jQuery 先用js简单看一下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
js实现全选和反选功能
10-25
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1028
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JS全选与反选
qq_34082921的博客
09-10 1557
【代码】JS全选与反选的代码实现。
js中全选与反选
m0_58451019的博客
04-05 163
window.onload = function (){ document.getElementById("all_select").onclick = function (){ var Hobby = document.getElementsByName("hobby"); for(i = 0; i < Hobby.length; i++){ Hobby[i].checked = this.value; } .
原生JS项目练习——全选与全不选和反选
周百万的博客
10-14 1382
一、主要功能介绍：1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）二、JS代码详细步骤解析：这不是重点，重点是学习原生JS。
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
vue实现全选、反选功能
08-30
Vue实现全选、反选功能 Vue实现全选、反选功能是指在Vue中实现选择所有项目或取消选择所有项目的功能。这种功能在实际应用中非常常见，例如在用户管理系统中，需要选择所有用户或取消选择所有用户。 在实现全选、...
简单js实现全选全部选反选效果
11-11
以上就是使用JavaScript实现全选和反选功能的基本方法。在实际应用中，可能还需要考虑更多细节，如处理异步加载的数据、兼容不同浏览器等。通过不断学习和实践，你可以熟练掌握这些技巧，提高网页的交互性和用户体验...
JS实现全选反选全不选
06-18
JS实现全选反选全不选
js, jQuery实现全选、反选功能
12-29
js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 <!DOCTYPE html> &...
vue实现全选和反选功能
08-29
在本文中，我们将详细介绍 Vue 实现全选和反选功能的知识点，包括相关的 HTML、JavaScript 和 Vue.js 代码。我们将从基本概念开始，逐步深入到实现全选和反选功能的具体步骤中。 Vue.js 简介 Vue.js 是一个渐进式...
JavaScript 实现全选、全不选和反选功能（最简单）
不许人间丶见白头
08-31 256
【代码】JavaScript 实现全选、全不选和反选功能（最简单）
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1731
这种情况在购物车中尤为常见
全选反选（javacript&jQuery实现有何不同）
adminsir0的博客
08-29 221
js,jQuery,全选，反选，多选框
js实现全选和反选
2301_79537907的博客
08-29 253
1、首先需要分别获取到首行的复选框元素，和下面的所有复选框元素。（将首行的复选框和下面的所有复选框分开，分别使用thead和tbody包裹）。1、给下面的所有复选框绑定点击事件，每次点击时，都循环查看下面所有的复选框是否有没选中，如果有一个没选中，则最上面第一个全选复选框就不选中。2、因为tobody中的复选框是跟随首行复选框是否选中（全选和反选），所以就将首行的复选框状态赋值给tbody中的复选框即可。核心算法：遍历tbody中复选框元素，获取首行复选框状态。
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 761
利用JS写了一个相对简单的全选和反选功能。
空间DID全部内容（Spatial DID）.txt
最新发布
07-11
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/li514006030/article/details/140362616
“表单全选取消全选”，js实现全选与反选的功能
06-13
好的，实现表单全选与取消全选的功能，需要用到JavaScript来动态修改表单元素的checked属性。下面是一个简单的示例代码，用于实现表单全选和取消全选的功能。 HTML部分： ``` 选项1 选项2 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值