实用的复选框操作——15分钟解决90%以上的javascript复选框操作

最新推荐文章于 2024-03-01 09:01:11 发布
最新推荐文章于 2024-03-01 09:01:11 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： web前端 文章标签： javascript 复选框 checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allenalex/article/details/41486947
版权

“复选框”页面：


——————————————————————————————————————————————————————————————————

实现功能：

1.点击标题行中的复选框，全部选中；否则，只选中当前行。

2.如果某条记录满足某个不能删除的条件，则该行对应的复选框不能选，删除按钮设置为灰色，点击弹出“该记录被被锁定，不能删除！”

3.否则，删除能实现，弹出“确定删除吗？”

4.如果下面的框都选上了。标题行的框也要显示被选上。

5.获取被选中的记录，如果他们已设置为不可选，则转换为可选，否则，设置为不可选。

—————————————————————————————————————————————————————————

整个页面实现的页面代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<%@taglib uri="/WEB-INF/priveliege.tld" prefix="priveliege"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--@aturbo
    注意事项：struts标签（<s:if test）使用的前提条件：
     1：导入了struts基本的jar包；
     2：页面有：<%@taglib prefix="s" uri="/struts-tags"%>
     所以，直接打开该页面，不会看到<s:if test的效果。（我把它已经注释了。）。其他的效果都能看到。
 -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
		<title> </title>
			<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.validate.js"></script>
		<script type="text/javascript" src="js/common-js.js"></script>
<script type="text/javascript">
	function selectAll(){
	 var selecteds = document.getElementsByName("selected");//获取name="selected"的复选框对象
	  if (selecteds != null) {
		var sall = document.getElementById("select_all");
		for ( var i = 0; i < selecteds.length; i++) {
			if (!selecteds[i].disabled) {//如果该复选框可选，
				selecteds[i].checked = sall.checked;//全选框选中，则将其也就被选中。全选框去选，则其也去选。
			}

		}
	} 
	}
	function turnDisabled(){
	   var selecteds=$("input[name='selected']:checked");//获取选择了的复选框 提醒：“$”时Jquery符号
      if(selecteds.length<1)
		{
			alert("没有选择任何记录！");
		   return;
		} 
		for(var i=0;i<selecteds.length;i++){
		  selecteds[i].disabled==true?selecteds[i].disabled=false:selecteds[i].disabled=true;
		}
	}
	function selectItem(){
	 var selecteds=document.getElementsByName("selected");
	 if(selecteds!=null){
	  var count=selecteds.length;//复选框总个数
	  var selectedCount=0;//统计被选中的个数
	  for(var i=0;i<count;i++){
	    if(selecteds[i].checked){
	      selectedCount++;
	    }
	  }
	    //如果选中的个数就是复选框总个数，那么全选/全不选框也标识为选中。
	  	document.getElementById("select_all").checked = (count == selectedCount);
	}
	}
</script>
	</head>

	<body id="cntlist">
	
			<div class="data_list">
				<table width="50%" border="1" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th width="30" style="padding-left:6px">
								<input type="checkbox" id="select_all" name="select_all" οnclick="selectAll()" />
							</th>
							<th scope="col">Name</th>
							<th scope="col">Age</th>
							<th scope="col">Score</th>
							<th scope="col">Action</th>
						</tr>
					</thead>
					<tbody>
						<tr>
								 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value="" />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> Acc </td>
								<td align="center"> 14	</td>
								<td align="center"> 78 </td>
								<td align="center">
									<s:if
											test="false">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--		<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
							<tr>
										 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected" 
												οnclick="selectItem()"
												value=""  />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selectedIds" id="selectedIds"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> bdd </td>
								<td align="center"> 16	</td>
								<td align="center"> 96 </td>
								<td align="center">
									<s:if
											test="%{Boolean表达式：true/false}">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
							<tr>
								 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value=""  />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selectedIds" id="selectedIds"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> ree </td>
								<td align="center"> 15	</td>
								<td align="center"> 77 </td>
								<td align="center">
									<s:if
											test="%{Boolean表达式：true/false}">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--		<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
					</tbody>
				</table>
			</div>
      <div><input type="button" value="转换" οnclick="turnDisabled()" /></div>
	</body>
</html>



aturbofly
关注
专栏目录
jenkins操作手册——巨详细，一篇足矣
锅锅聊软测
07-04 1652
随着软件开发复杂度的不断提高,团队开发成员间如何更好的协同工作以确保软件开发的质量已经成为开发过程中不可回避的问题。尤其是近年来敏捷开发在软件领域越来越火，如何能在不间断变化的需求中快速适应和保证软件的质量显得尤其重要。持续集成正是针对这一问题的一种软件开发实践。它倡导团队开发成员必须经常集成他们的工作，甚至每天都可能发生多次集成。而每次集成都是通过自动化的构建来验证，包括自动编译、发布和测试，从而尽快地发现集成错误，让团队能更快的开发内聚的软件。Jenkins是一个开源项目，提供了一种易于使用的持续集成系
【狂神说笔记—— Java基础17-JavaScript，jQuery】
weixin_46055348的博客
07-27 509
【狂神说笔记—— Java基础17-JavaScript，jQuery】
复选框的左右移动
12-11
使用jquery实现的复选框左右移动用于权限管理
JS 动态控制checkbox嵌套checkbox text不用与否
程仔涵(Java)
11-11 1493
情境:一组checkbox，其中有checkbox9内嵌checkboxA,B,C,D,另有checkbox19，checkb20内嵌有text。要求，只有当checkbox9选中时，checkboxA,B,C,D可用； 当checkbox19，checkb20选中时，text输入框可用，否则为disabled。 程序实例:   function controlRadio(chk,cont
js点击文本框弹出可选择checkbox
chenjy12345的博客
10-15 6406
js点击文本框弹出可选择的checkbox复选框 #div{ margin-bottom:10px; position:relative; } #div1{ width:153px; padding-top:0px; padding-left:0px; position:absolute; } #div1 ul{ margin-top:0px; padding-left:0px;
jQuery-复选框左右选择效果
weixin_30551963的博客
04-21 246
今天在百度看到有人问复选框的左右选择怎么写，我就大半夜4点多睡醒了，起来做了下这个jQuery版本的， 不敢说代码多好多高效，只是为了实现即可。 小可丶专用-复选框左右选择 人员操作 成员 成员一 成员二 成员三 成员四 成员五 成员六 成员七 成员八 成员九 全选 | 反选 未分类成员 成员甲 成员乙 成员丙 成员丁 成员戊 成员己 成员...
Javascript左右选择框
04-11
适用于入门前端 学习的小白参考学习，是经典的demo,适用于左侧选择框选择，选中的放到右侧
JavaScript操作BOM对象
yananye的博客
01-18 352
java
从入门到精通HTML5——PDF——网盘链接
02-27
　9.3.4　复选框——checkbox 189 　9.3.5　普通按钮——button 190 　9.3.6　提交按钮——submit 191 　9.3.7　重置按钮——reset 192 　9.3.8　图像域——image 193 　9.3.9　隐藏域——hidden 195 　9.3.10　文件...
第八章综合案例——构建DVD租赁商店数据仓库
qq_48038032的博客
11-15 385
8.3 案例实现 8.3.2 加载日期数据至日期维度表 1.打开Kettle工具，创建转换 使用Kettle工具，创建一个转换load_dim_date，并添加生成记录控件、增加序列控件、JavaScript代码控件、表输出控件以及Hop跳连接线，具体如图1所示。 图1 创建转换 2.配置生成记录控件 双击“生成记录”控件，进入“生成记录”配置界面,在“限制”处添加生成的日期，默认为10，这里改为3650，即生成10年的日期（10*365）；在“字段”框添加字段language（语言）、co..
javascript 复选框左右传值
04-27
js复选框左右传值 很简单~~~~~~~~~~~~~~~~~~~~
javascript判断单选框或复选框是否选中方法集锦
12-10
提示：getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合。 样例一<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <title>判断单选框或复选框是否选中</title> </head> <body> <input name=”radio1″ type=”radio” value=”test”> <button  onClick=”alert(‘单选项’+(document.getElementsByName(‘radio1′)[0].ch
js实现添加删除表格（两种方法）
10-19
本篇文章主要介绍了js实现添加删除表格（两种方法）的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
jquery实现复选框左右选择效果
m0_60696519的博客
09-22 441
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="./js/...
MVC入门学习笔记（十一）
Yao,Mane
07-08 1151
<br />十.复选框和单选框<br />   <br />   1.在Index.aspx中输入：<br />  <% using(Html.BeginForm ("index","home",FormMethod.Post)){ %><br />   <br /> <!--下面是一个RadioButtonList--><br /> <% foreach (string s in Html.RadioButtonList("r1",<br />    new[] { "音乐", "书法" })){%><b
js实现复选框的设置
weixin_44013240的博客
07-19 1320
目录结构 实现的结果 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="contain
JavaScript操作checkbox复选框
热门推荐
人生若只如初见的博客
06-17 1万+
JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做操作。 取值 <body> <p> <label for="hobby">Hobby: <input type="checkbox" name="hobby" va...
JS(JavaScript)中如何实现，复选框checkbox多选功能
最新发布
qq_58341172的博客
03-01 1163
当我们通过querySelectorAll()获取的类元素是一个伪数组，因此我们需要将其转化为真正的数组。arr.every()返回的是一个boolean值，指的是只要有一个元素大于50，返回true；arr.every()返回的是一个boolean值，指的是每一个元素都大于2，返回true；arr.filter()返回的是一个数组，是一个过滤器，指的是返回数字大于30的数组元素；以上代码指的是，数组中任何一个元素(item)，都被选中；Array.from(arr):将其转为数组。
JavaScript复选框的使用
syy的博客
10-30 3567
js复选框的使用
多页面复选框高级验证与数组操作JavaScript实现
本文档主要介绍了如何在JavaScript中实现一个高级版的复选框验证功能，特别关注于支持同时选中多个页面的情况。首先，文档引入了三个字符串方法：trim()，ltrim()和rtrim()，用于去除字符串两侧的空白字符，这在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值