js复选框的全选，多选，全选,全不选，反选

最新推荐文章于 2022-08-09 10:48:32 发布
最新推荐文章于 2022-08-09 10:48:32 发布
阅读量777 收藏
点赞数
分类专栏： javascript 文章标签： input generator function javascript firefox html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 复选框的全选，多选，全不选，反选 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">


</HEAD>

<BODY>
<!--复选框的全选，多选，全不选，反选   -->
<form name=hrong> 
<input type=checkbox name=All οnclick="checkAll('mm')">全选<br/> 
<input type=checkbox name=mm οnclick="checkItem('All')"><br/> 
<input type=checkbox name=mm οnclick="checkItem('All')"><br/> 
<input type=checkbox name=mm οnclick="checkItem('All')"><br/> 
<input type=checkbox name=mm οnclick="checkItem('All')"><br/> 
<input type=checkbox name=mm οnclick="checkItem('All')"><br/><br/> 


<input type=checkbox name=All2 οnclick="checkAll('mm2')">全选<br/> 
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/> 
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/> 
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/> 
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><br/> 
<input type=checkbox name=mm2 οnclick="checkItem('All2')"><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(str) 
{ 
	var e = window.event.srcElement; 
	var all = eval("document.all."+ str); 
	if (e.checked) 
	{ 
		var a = document.getElementsByName(e.name); 
		all.checked = true; 
		for (var i=0; i<a.length; i++) 
		{ 
			if (!a[i].checked)
			{ 
				all.checked = false; break;
			} 
		}
	} 
	else 
		all.checked = false; 
}
</SCRIPT> 


</BODY>
</HTML>

转自：http://heisetoufa.iteye.com/blog/356077


注意：在firefox下无法运行


xjinza
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现复选框全选全不选以及子复选框带动全选框的选中
04-26
实现全选全不选反选 并且,如果是在全选状态下将子复选框的选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
树结构 复选框 多选 全选功能
07-18
树结构 复选框 多选 全选功能
用js实现复选框的反选和全选和全不选
feilong_12的专栏
02-28 708
function quanxuan(){ for(i=1;i document.getElementById("check"+i).checked=true; } } function quanbuxuan(){ for(i=1;i document.getElementById("check"+i).checked=false; } } function fanxuan(){
JS实现单选、多选、全选、反选
胖大星的博客
08-17 1万+
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全选反选问题</title> <script type="text/javascript" src="jquery-1.4
js全选
what_happen_to_you的博客
06-04 207
1.jquery中attr和prop的区别 :https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html 2.效果如下： 3.页面代码注意： 4.js代码 //全选 function SelectAllCheckBox(obj) { var trList = KaTeX parse error: Expecte...
js单选多选和全选
m0_65878076的博客
03-17 1981
js里面选中和取消，一般用在购物车和数据保存之中，很方便的，有需要的小伙伴可以直接复制代码使用
实现table表格checkbox复选框的全选 反选
11-11
实现table表格checkbox复选框的全选 反选.
html JavaScript js复选框的全选，多选，全选,全不选，反选
05-24
NULL 博文链接：https://heisetoufa.iteye.com/blog/356077
javaScript checkbox 全选/反选及批量删除
10-29
javaScript checkbox 全选/反选及批量删除实现代码，需要的朋友可以参考下。
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
element的el-tree多选树(复选框)父子节点关联不关联 　属性check-strictly　官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。 而此属性的意思是： 默认...
JS利用复选框实现全选和反选
热门推荐
big_data1的博客
01-17 1万+
需求： A.全选： 点击全选，所有选项被选中； B.全不选：全选情况下再次点击全选框，所有选项都不选； C:全选情况下，取消某一个或几个子选项，全选框也变为不选中； 没有点击全选的情况下，选中了所有子选项，全选框自动选中。代码示例：html代码： 全选 1选 2选 3选 4选 JAvaScript代码： function setChecked(obj)
JS完成全选框
qq_23086629的博客
10-09 593
checkAll = function(){ var all=document.getElementById('checkAll');//获取到点击全选的那个复选框的id var one=document.getElementsByName('hotelName');//获取到复选框的名称 //因为获得的是数组，所以要循环 为每一个checked赋值 for(var i=0;i&lt;...
JS实现全选框
weixin_64560999的博客
08-09 392
朋友们有没有比较简洁的算法求教~
js实现多选框的全选/全不选
simpletonn的博客
10-13 601
js实现多选框的全选/全不选
【JavaScript】实现复选框的全选、全部不选、反选
weixin_34194551的博客
08-25 108
以较为简洁的程序实现复选框的全选、全部不选、反选 操作。 并且将可变的部分设置为JS的参数，以实现代码复用。 全选和全不选 第一个参数为复选框名称，第二个参数为是全选还是全部不选。   function allCheck(name,boolValue) { var allvalue = document.getElementsByName(name); for (var i...
使用JavaScript实现全选（全不选）按钮
qq_41586079的博客
10-18 6997
有如下案例，使用JavaScript实现全选（全不选）按钮。 这个按钮在实际开发中也是很常用的，我就把我的源码附上 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多选框练习&lt;/title&gt;
乘法表.php
Vivian_shuang的博客
08-15 445
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
js实现(全选)多选按钮
weixin_34198453的博客
10-30 1122
第一种，全部选中：   &lt;html&gt; &lt;head&gt; &lt;title&gt;复选框checked属性&lt;/title&gt; &lt;script language="JavaScript" type="text/javascript"&gt; function changeState(isCh
js复选框全选全不选
最新发布
04-17
在JavaScript中，可以通过以下方式实现复选框的全选和全不选功能： 1. HTML结构： ```html <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" class="checkbox"> 选项1 <input type="checkbox" class="checkbox"> 选项2 <input type="checkbox" class="checkbox"> 选项3 ``` 2. JavaScript代码： ```javascript // 获取全选复选框和其他复选框的元素 var selectAllCheckbox = document.getElementById("selectAll"); var checkboxes = document.getElementsByClassName("checkbox"); // 全选复选框的点击事件处理函数 selectAllCheckbox.addEventListener("click", function() { // 遍历其他复选框，根据全选复选框的状态设置它们的状态 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = selectAllCheckbox.checked; } }); ``` 以上代码中，首先通过`getElementById`和`getElementsByClassName`方法获取到全选复选框和其他复选框的元素。然后，给全选复选框添加了一个点击事件处理函数，当全选复选框被点击时，遍历其他复选框，并根据全选复选框的状态设置它们的状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值