JavaScript写的一个列表实现CheckBox列的多选和取消多选代码

最新推荐文章于 2023-07-15 16:58:26 发布
最新推荐文章于 2023-07-15 16:58:26 发布
阅读量202 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JAVA 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/stevenbill/article/details/83835102
本文介绍了一种使用JavaScript实现HTML表格中全选及部分选择功能的方法。通过定义selectAll和selSome两个函数，可以轻松地控制表格内复选框的状态，包括全选所有项或检查是否有未选中的项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<script type="text/javascript" language="javascript">
function selectAll(control)
{
var arrAll=document.getElementsByTagName("input");

for(var i=0;i<arrAll.length;i++)
{
if(arrAll[i].type=='checkbox')
{
document.getElementById(arrAll[i].id).checked=document.getElementById(control.id).checked;
}
}
}
function selSome()
{
var selAll=document.getElementById("chkAll");
var arrAll=document.getElementsByTagName("input");
var count=0;
var countCB=0;
for(var i=0;i<arrAll.length;i++)
{
if(arrAll[i].type=="checkbox"&&arrAll[i].id!="chkAll")
{
countCB++;
if(arrAll[i].checked)
{
count++;
}
}
}
selAll.checked=(count===countCB);
}

</script>
</head>
<body>
<table>
<th>
<td><input type="checkbox" id="chkAll" onclick="selectAll(this)"></td>
</th>
<tr>
<td>
<input type="checkbox" id="cb1" onclick="selSome()">
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb2" onclick="selSome()" >
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb3" onclick="selSome()">
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb4" onclick="selSome()">
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb5" onclick="selSome()">
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb6" onclick="selSome()">
<td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb7" onclick="selSome()">
<td>
</tr>
</table>
</body>
</html>
JS 实现表格中checkbox（复选框）全选反选
chaomi_didi的博客
10-16 2777
一、需求步骤–实现表格首行复选框全选反选功能 1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中； 2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。 二、撸码思路 1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked; 2、每选中一个tbody内的复
js加载数据列表，以及checkbox复选框全选
zjy的博客
02-05 1465
表头添加的checkbox复选框，增加点击事件swapCheck() //加载数据列表 function loadStoreList(schemeId) { $.ajax({         url: "/ui/psmSaleOrder/listStoreByScheme?schemeId="+schemeId,         type: 'GET',         as
javascript实现点击商品列表checkbox实时统计金额的方法
10-24
主要介绍了javascript实现点击商品列表checkbox实时统计金额的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
jsp实现将选中的多选框的table列动态加载到另一个页面特定位置或者特定table里面
鱻焱的博客
06-28 1134
jsp实现将选中的多选框的table列动态加载到另一个页面特定位置或者特定table里面 页面代码，后台获取的数据，将每一行的字段值赋予checkbox的attr1......9, <table width="99%" border="0" cellpadding="0" cellspacing="1" class="biaocss...
列表点击编辑的时候多选删除
QSWの
10-24 532
在做收藏和消息列表点击编辑进行全选删除和单选删除时，遇到了一个这样的问题：当点击编辑了之后，后面加载出来的列表条目不会渲染上去多选框，也添加不上被选中的状态，这样就导致无法判断是否被选中。 请教了一番后，才知道需要把后加载出来的列表先解绑再绑定checked的状态。 全选按钮： <input id="all" type="checkbox" class="dr_select" data="a...
用JavaScript实现CheckBox的多选和反选.pdf
最新发布
01-03
JavaScript 实现 CheckBox 的多选和反选 CheckBox 在网页中的应用非常广泛，例如在线调查、后台管理系统等。当前主流的方法是使用 JavaScript 实现 CheckBox 的多选和反选。下面笔者将为大家介绍如何实现这种网页...
Java中checkbox实现跨页多选的方法
08-31
在这个方法中，我们将`all_select`字符串转换为一个列表，以便后续处理。这可以用于存储用户在所有页面上的选择。然后，可以根据分页信息加载新的页面数据，同时在展示时根据`now_selected`恢复选中状态。 在实际...
angularjs实现的checkbox多选、全选、反选
09-12
在本文中，我们将深入探讨如何使用AngularJS实现一个功能完备的复选框（checkbox）系统，包括多选、全选和反选功能。这个系统的一个关键特性是它完全基于AngularJS，无需依赖其他源数据，因此可以确保原始数据的完整...
用JavaScript实现CheckBox的多选和反选
09-14
在网页中很多时候会用到CheckBoX的多选和反选．比如网上调查或是后台管理系统等。现在主流的方法是用JavaScript来实现CheckBOX的多选和反选，下面笔者就为大家介绍一下如何实现这样的网页效果
checkbox 选中一个另一个checkbox也会选中的实现代码
09-02
当需要实现“选中一个 `checkbox` 另一个也会被选中”的功能时，通常会涉及到事件监听和状态同步。这篇教程将详细介绍如何通过 JavaScript（特别是 jQuery 库）来实现这种联动效果。 首先，我们要明白 `checkbox` ...
JavaScript复选框列表操作技巧
我点评的博客
07-15 660
在上面的代码中，我们使用了addEventListener()方法来为所有名为checkbox的复选框添加事件。在上面的代码中，我们使用了getElementsByName()方法来获取所有名为checkbox的复选框。在上面的代码中，我们使用了getElementById()方法来获取id为checkbox1的复选框的值。在上面的代码中，我们使用querySelectorAll()方法来获取所有选中的复选框。有时，我们需要禁用或启用复选框。例如，当用户选择了某个复选框时，我们可能需要将其他复选框禁用。
angular2--怎么实现多选功能
Ariel的博客
01-09 1115
实现效果如下，实现多选和取消的功能： 这里我定义一个数组为labelLists，用来存放上面列举的标签，数据格式如下，其中isSelect为标识该标签是否已选： html: html页面使用*ngFor来循环遍历数组；[ngClass]为动态添加一个点击后的active样式，判断条件为当前点击的标签的isSelect属性为true；(click)事件就来做具体的点击效果切换。 &lt;ul&g...
弹出选项框 添加别的页面表到输入框里面保存别的页面id
qq_38647207的博客
12-20 396
&lt;tr&gt;&lt;td&gt;派专家组长:&lt;/td&gt;&lt;td&gt; &lt;div&gt; &lt;input type="hidden"  id="expertId" value="${laboratoryEntity.expert.id}"&gt; &lt;input type="text" i
Angular Js 里面table, checkbox制作可多选，单选的表格
qq_34241677的博客
11-30 4119
Angular Js 里面table, checkbox制作可多选，单选的表格查看别人的方法再加拓展，忘记了原博客地址； 主要实现主表格里面可以展开子表，子表的信息可以多选也可以单选，并绑定数据，算是三级选中吧？； 复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设
jq实现复选框联级选中和取消动作
...
07-30 1228
图例如下： //获取当前的复选框 $('input[name=pri_id_list[]]').click(function(){ //获取当前级别 var cur_level = $(this).attr('level'); //获取当前选中的状态 var chk = $(thi
js实现带复选框的多选下拉框
daxi玫瑰的博客
11-19 4152
最近被派去做一个不使用任何框架的纯js的项目，界面属于那种机器的界面，算是中规中矩的。新特性需要用原生的js或者jq写一个可多选的下拉框，实现的方式有很多。网上常见的有一下几种： 1.下载multiple-select.js插件，由于公司使用网络的限制，下载插件不方便，而且这个最后的效果也不是我想要的，所以没有采用这种实现方法。 2.网上还有常见的 div+ul&li 的实现，这种也比较方便，不过在处理值的时候，感觉不like~，最后也没有选择这种方法。 3.使用div+定位：（根据上面方法2
listview中带有checkbox实现多选操作
小资女的博客
05-23 3333
关于listview中带有checkbox实现多选操作，我都接触好多次了，但是每次要想起来实现的逻辑，还得郁闷半天，今天特意记录一下哈。虽然现在recyclerview已经替代listview，但是两者的实现方式都是相同的，新的工作就是填坑的，所以只能在之前的基础上修改1.     首先声明一个实体类，在类里面添加isChecked标识,默认false2.     布局文件:        che...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值