控制Checkbox全选的JS

最新推荐文章于 2024-04-04 19:20:16 发布
最新推荐文章于 2024-04-04 19:20:16 发布
阅读量756 收藏
点赞数
分类专栏： Web Javascript 文章标签： input javascript function list button html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/toicecream/article/details/262311
版权

 
 


<script language="javascript">
function selcheck() {
 var objs = myTable.getElementsByTagName("input");
 for(var i=0; i<objs.length; i++) {
 if(objs<i>.type.toLowerCase() == "checkbox" )
 objs<i>.checked = true;
 }
}
</script>
使用方法:

1. 在<head></head>内插入如上JS代码

2. 设置checkbox,例如


<table>
<TR>
<td>
<INPUT type="checkbox" name="1" value="a">
</td>
<td>
<INPUT type="checkbox" name="2" value="b">
</td>
<td>
<INPUT type="checkbox" name="3" value="c">
</td>
</TR>
</table>
3. 加入一个控制按钮 如


<INPUT type="button" name="select" value="全 选" οnclick="selcheck()">
注意checkbox 的 name 的规律

 

 

 


 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>选择项全部选中</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
//  End -->
</script>
</head>

<body>

<form name=myform action="" method=post>
<table>
<tr><td>
<b>请选择下面的选项</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>                                                   
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>
</form>


</body>
</html>

另一实现方法：

<form name=hrong>
<input type=checkbox name=All οnclick="checkAll('mm')">??<br><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br>
<input type=checkbox name=mm οnclick="checkItem()"><br></form>

<SCRIPT LANGUAGE="JavaScript">
function checkAll(str)
{
  var a = document.getElementsByName(str);
  var n = a.length;
  for (var i=0; i<n; i++)
  a[i].checked = window.event.srcElement.checked;
}
function checkItem()
{
  var e = window.event.srcElement;
  if (e.checked)
  {
    var a = document.getElementsByName(e.name);
    document.hrong.All.checked = true;
    for (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ document.hrong.All.checked = false; break;}
    }
  }
  else document.hrong.All.checked = false;
}
</SCRIPT>

 
 

toicecream
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JS实现checkbox全选功能实例代码
10-21
最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单，再次点击全选取消选中。下面小编给大家分享实现代码，对js实现checkbox全选功能感兴趣的朋友参考下吧
javascript中CheckBox全选终极方案
10-24
在JavaScript编程中，实现CheckBox全选功能是一项常见的需求，特别是在数据展示或用户交互的场景下，如ASP.NET中的Gridview或Repeater控件。这里我们将深入探讨一种在ASP.NET环境中利用JavaScript实现CheckBox全选和...
js实现checkbox全选
liangshui999的博客
07-02 3199
checkbox选中状态主要是靠checked属性控制，js获取设置属性可以直接通过.来控制，或者通过getAttribute()，setAttribute()控制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&l...
利用js 实现 checkbox全选计算
射手座的程序媛的专栏
12-12 444
利用jquery实现checkbox全选计算功能,取消设置为0, 选中部分进行计算的功能
10.el-checkbox全选
最新发布
yujiabao702的博客
04-04 386
思路：定义一个变量 incheckedAll 表示是否全选，在 el-checkbox-group 外层单独写一个 el-checkbox 用来表示全选，给 el-checkbox-group 和 el-checkbox 都绑定 change 事件。需求：实现复选框多选功能。
vue el-checkbox 全选
weixin_62601942的博客
09-07 1061
【代码】vue el-checkbox 全选。
JS实现checkbox的全选和反选
weixin_53748496的博客
12-09 1884
【代码】JS实现checkbox的全选和反选。实现以下功能： （1）当选中表头的商品 价格前的checkbox框时，下面的每个商品都会被选中。（全选） （2）当选中所有商品时，表头的商品 价格前的checkbox框自动被选中。（反选） （3）只要有一个商品没被选中，表头的商品 价格前的checkbox框就不会被选中。
elementui el-checkbox全选
weixin_42674490的博客
11-10 1866
一.html结构 <el-checkbox class="allCheck" :indeterminate="item.isIndeterminate" v-model="item.isCheckAll" @change="handleCheckAllChange(item.isCheckAll,i)">全选</el-checkbox> <el-checkbox-group v-model="item.value" @change="handleCheckedChange(i
Checkbox全选反选
weixin_43332393的博客
09-27 1127
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
一行jQuery代码搞定checkbox 全选和全不选
合格程序猿
04-01 294
让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；
vue checkbox全选
qq_27717857的博客
06-30 218
代码很简单，用的es5 Array新增的方法every 和 map 。先来一张效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></scr...
JS / JQ 简单实现 checkbox 全选功能
Bigfishseasugar
05-15 263
实现全选功能有两个方面需要注意： 1 当修改全选选框的 checked 状态时，会同步修改其他选框的 checked 状态 2 当其他选框的 checked 状态都为 true 时，此时全选选框的checked状态必须为 true 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...
Jquery CheckBox全选方法代码附js checkbox全选反选代码
10-29
喜欢上了Jquery的简便、明了···与用JavaScript写的比起来真的有点差距！
jquery一键控制checkbox全选、反选或全不选
11-27
`<input type="checkbox" id="allChecked">`、`<input type="checkbox" id="invertChecked">`和`<input type="checkbox" id="orChecked">`是控制全选、反选和一键切换的复选框。 6. **JavaScript事件**： 使用`....
JS操作input标签属性checkbox全选的实现代码
10-20
主要介绍了JS操作input标签属性checkbox全选的代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
javascript实现checkbox全选的代码
10-24
本文给大家分享的是js实现checkbox的全选的代码,在网页制作中很常用的js代码,供大家学习参考。
JS+JSP checkBox 全选具体实现
10-26
本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下
javascript使用avalon绑定实现checkbox全选
10-24
checkbox全选应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，一些CMS系统的后台中，使用本JS效果后，会大大增强了操作体验，那么究竟是如何实现这一功能的...
js checkbox全选
10-01
在JavaScript中实现checkbox的全选功能可以通过以下步骤完成： 1. 首先，我们需要获取到所有的checkbox元素。可以通过document.querySelectorAll()方法来获取所有的checkbox元素，将其保存到一个变量中，如checkBoxes。 2. 接下来，我们需要给全选的checkbox添加一个事件监听器。可以通过document.getElementById()方法获取到全选的checkbox元素，将其保存到一个变量中，如selectAllCheckbox。然后可以使用addEventListener()方法来为该元素添加一个click事件监听器。 3. 在事件监听器中，我们需要遍历所有的checkbox元素，并将它们的checked属性值设置为与全选checkbox的checked属性值一致。我们可以使用for循环遍历checkBoxes数组，然后在每次迭代中，将checkBoxes[i].checked属性值设置为selectAllCheckbox.checked。 以下是一个完整的JavaScript代码示例： ```javascript // 获取所有的checkbox元素 const checkBoxes = document.querySelectorAll('input[type="checkbox"]'); // 获取全选的checkbox元素 const selectAllCheckbox = document.getElementById('selectAll'); // 全选checkbox的事件监听器 selectAllCheckbox.addEventListener('click', function() { // 将所有的checkbox元素的checked属性值设置为与全选的checkbox一致 for (let i = 0; i < checkBoxes.length; i++) { checkBoxes[i].checked = selectAllCheckbox.checked; } }); ``` 以上是实现checkbox的全选功能的简单示例。通过上述代码，当点击全选的checkbox时，所有的checkbox元素的checked属性值都会被设置为与全选的checkbox一致，从而实现了全选功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值