JS的全选和不全选

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量412 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36074043/article/details/70738194
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'sj3.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
			.bg {

				background-image: url(images/list_bg.gif);
				background-repeat: no-repeat;
				width: 730px;
			}

			td {
				text-align: center;
				font-size: 13px;
				line-height: 25px;
			}

			body {
				margin: 0
			}
		</style>
<script type="text/javascript">
	window.onload = function() {

			};
			

			function check() {
				//把所有参与选择的checkbox使用相同的name
				var eles = document.getElementsByName("product");
				var i = 0;
				// 如果是全选状态，则取消所有的选择
				if(isSelectAll() == true) {
					for( i = 0; i < eles.length; i++) {
						eles[i].checked = false;
					}
					//document.getElementById("all").checked = false;
				} else {
					// 否则选中每一个checkbox
					for( i = 0; i < eles.length; i++) {
						eles[i].checked = true;
					}
					
				}
			}

			// 判断当前是否为全选状态
			function isSelectAll() {
				var isSelected = true;
				var eles = document.getElementsByName("product");
				for(var i = 0; i < eles.length; i++) {
					if(eles[i].checked != true) {
						isSelected = false;
					}
				}
				return isSelected;
			}

			// 选择任意一个非全选checkbox
			function checkOne() {
				if(isSelectAll()) {
					document.getElementById("all").checked = true;
				} else {
					document.getElementById("all").checked = false;
				}
			}
</script>

  </head>
  
  <body>
		<table border="0" cellspacing="0" cellpadding="0" class="bg">

			<tr>

				<td style="height:40px;"> </td>

				<td> </td>

				<td> </td>

				<td> </td>

			</tr>

			<tr style="font-weight:bold;">

				<td>
				<input id="all" type="checkbox" value="全选" οnclick="check()" />
				全选</td>

				<td>商品图片</td>

				<td>商品名称/出售者/联系方式</td>

				<td>价格</td>

			</tr>

			<tr>

				<td colspan="4">
				<hr style="border:1px  #CCCCCC dashed" />
				</td>

			</tr>

			<tr>

				<td>
				<input name="product" type="checkbox" value="1" οnclick="checkOne()" />
				</td>

				<td><img src="images/list0.jpg" alt="alt" /></td>

				<td>杜比环绕，家庭影院必备，超真实享受
				<br />
				出售者：ling112233
				<br />
				<img src="images/online_pic.gif" alt="alt" />    <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>

				<td>一口价
				<br />
				2833.0 </td>

			</tr>

			<tr>

				<td colspan="4">
				<hr style="border:1px  #CCCCCC dashed" />
				</td>

			</tr>

			<tr>

				<td>
				<input name="product" type="checkbox" value="2" οnclick="checkOne()"/>
				</td>

				<td><img src="images/list1.jpg" alt="alt" /></td>

				<td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过
				<br />
				出售者：aipiaopiao110
				<br />
				<img src="images/online_pic.gif" alt="alt" />    <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>

				<td>一口价
				<br />
				6464.0 </td>

			</tr>

			<tr>

				<td colspan="4">
				<hr style="border:1px  #CCCCCC dashed" />
				</td>

			</tr>

			<tr>

				<td>
				<input name="product" type="checkbox" value="3" οnclick="checkOne()"/>
				</td>

				<td><img src="images/list2.jpg" alt="alt" /></td>

				<td>精品热卖：高清晰，30寸等离子电视
				<br />
				出售者：阳光的挣扎
				<br />
				<img src="images/online_pic.gif" alt="alt" />    <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>

				<td>一口价
				<br />
				18888.0 </td>

			</tr>

			<tr>

				<td colspan="4">
				<hr style="border:1px  #CCCCCC dashed" />
				</td>

			</tr>

			<tr>

				<td>
				<input name="product" type="checkbox" value="4" οnclick="checkOne()"/>
				</td>

				<td><img src="images/list3.jpg" alt="alt" /></td>

				<td>Sony索尼家用最新款笔记本
				<br />
				出售者：疯狂的镜无
				<br />
				<img src="images/online_pic.gif" alt="alt" />    <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>

				<td>一口价
				<br />
				5889.0 </td>

			</tr>

			<tr>

				<td colspan="4">
				<hr style="border:1px  #CCCCCC dashed" />
				</td>

			</tr>

		</table>

  </body>
</html>

_苏小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现全选和全不选功能
10-15
总结来说，JavaScript实现全选和全不选功能的关键在于监听全选复选框和待选复选框的点击事件，以及正确地更新和同步`checked`属性。通过这种方式，我们可以提供给用户方便快捷的批量操作选项，提升用户体验。
js 全选
qq_49438920的博客
06-06 1029
checkbox全选实现，Array.from、every、forEach的应用
【JS】实现全选功能
点滴记忆
07-12 883
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1033
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
最新发布
weixin_65793170的博客
04-02 2450
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
JS如何实现勾选全部复选框和不全选复选框
itclanCoder
02-01 4579
前言在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢示例效果allcheckbox原生Js实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置...
js实现全选和全不选
10-15
在JavaScript编程中，全选和全不选的功能是常见的...总的来说，JavaScript实现全选和全不选的功能涉及到DOM操作和事件处理。理解这两个核心函数的工作原理，可以帮助开发者更好地处理复选框的交互逻辑，提升用户体验。
JavaScript案例-js全选和全不选.zip
02-16
这个"JavaScript案例-js全选和全不选.zip"压缩包文件聚焦于一个常见的交互功能：全选和全不选。在网页表单或数据列表中，用户经常需要一次性选择所有项或取消所有项的选择，这一功能就通过JavaScript来实现。 全选...
JS实现checkbox的全选和反选
07-22
资源名称：JS实现checkbox的全选和反选资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
基于JavaScript实现全选、不选和反选效果
10-20
在网页交互中，全选、不选和反选功能是常见的需求，特别是在处理多选列表时。本示例展示了如何使用JavaScript实现这些功能。这里的关键在于理解和操作DOM（Document Object Model）元素，以及掌握JavaScript事件处理...
JavaScript 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1849
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
js实现全选(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 506
js实现全选(附完整源码)
JS全选功能完善（全选/全不选/判断是否全选）
weixin_42468212的博客
08-17 2842
判断是否全选，用到计数器的方法。 html部分 <input type="checkbox" name="all">全选<br /> <input type="checkbox" name="check"><span>10</span><br /> <input type="checkbox" name="check...
JS实现全选全不选功能
qq_64037242的博客
04-15 626
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1114
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
原生JS项目练习——全选与全不选和反选
周百万的博客
10-14 1414
一、主要功能介绍：1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）二、JS代码详细步骤解析：这不是重点，重点是学习原生JS。
js 判断 复选框全选、全不选、反选、必选一个
weixin_30471561的博客
04-28 252
一个挺 使用的 js 代码片段， 判断 复选框全选、全不选、反选、必选一个 记录下， 搬来的 思路： 修改数据的 选中与否状态， 拿到所有的输入框，看是否有选中的状态 <html> <head> <title> 复选框全选、全不选、反选、必选一个 </title&...
利用Javascript实现全选和全不选
mover999的博客
09-30 7804
最近开始练习js的基本操作，常常因为一些小疏忽导致页面效果无法实现。这篇博客中我来总结一下如何js实现全选和全不选。 1.首先你需要了解input标签中复选框。当该复选框被选中时，调用该元素checked属性的值为true。这一点是我们利用js实现该效果的第一个要点。 2.全选：当鼠标点击全选这个复选框时，调用函数allSelet().使用for循环遍历每一个需要被选中的input元素（我们它...
js表单全选和取消全选
04-06
以下是一个实现js表单全选和取消全选的示例代码： HTML代码： ```html <label><input type="checkbox" name="fruit" value="apple">苹果</label><br> <label><input type="checkbox" name="fruit" value=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值