Exameple014实现html中checkbox的全选,反选和全不选(1)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例014</title>
</head>
<body>
	<form>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input type="checkbox" name="username[]" value="handsomehan">handsomehan<br>
		<input onclick="qx()" type="button" value="全选">
		<input onclick="fx()" type="button" value="反选">
		<input onclick="qbx()" type="button" value="全不选">
	</form>
	<script>
		var obj = document.getElementsByName("username[]");

		function qx() {
			for(var i = 0; i < obj.length; i ++) {
				obj[i].checked = true;
			}
		}
		function fx() {
			for(var i = 0; i < obj.length; i ++) {
				if(obj[i].checked){
					obj[i].checked = false;
				}else {
					obj[i].checked = true;
				}
			}
		}
		function qbx() {
			for(var i = 0; i < obj.length; i++) {
				obj[i].checked = false;
			}
		}
	</script>
</body>
</html>

  

时间: 2024-10-11 22:10:23

Exameple014实现html中checkbox的全选,反选和全不选(1)的相关文章

利用js实现全、反选、全不选功能(check)

<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><script type="text/javascript">window.onload=function(){// 全选/全不选var chk1=document.getElementById("chk1");// 反选var chk

关于列表中checkbox选中,全选/反选设置

关于列表中checkbox选中,全选设置 1 <html> 2 <head> 3 <script type="text/javascript"> 4 //点击行时,checkbox处理方法 5 function doclick(id){ 6 var allche = document.getElementById("allid");//全选checkbox 7 var che = document.getElementsByNam

实现前端table中checkbox全选功能,并将选中的数据发送到后端

一.需求 1. 点击这个checkbox按钮,会选中下面所用checkbox,当然在选中的情况下点击,会将下面所有选中的checkbox取消: 2. 当下面使用submit的提交按钮时,会将所有checkbox选中的数据提交给后端: 二.实现 1.实现全选checkbox功能 技术分析:其实这里可以使用js活着jquery两种方式,我暂时使用的是js中的dom实现的,具体代码如下: <!DOCTYPE html> <html> <head> <title>实

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他)

一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () {                var checkedOfAll = $(this).prop("checked");                if (checkedOfAll == true) {                    $("input[id*='check']

关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来促进进步. 我也会尽可能把我查找到资料的出处引出来,以此来感恩对我提供帮助的人们. 正题如下 一.关于Winform下DataGridView中实现checkbox全选反选.同步列表项的处理 1.checkbox的添加:在设计页面选择编辑列在新添加的列中注意如下几个属性: SortMode = No

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

checkbox 全选,反选 ,全不选

在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对列表进行循环检测,此时可以将所有的(无论之前什么状态),设为选中,也可对未选中的进行选中. 2. 反选:当反选checkbox被点击(不管点击之前是什么装填)后,获取其其状态值,对列表进行循环检测,将被检测的元素的checked状态反向处理,即可. 3. 列表全选或者不全选:当列表中的任意一个che

dView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合

第一步,显示checkbox按钮: 点击AspxGridView的columns,你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn Column;默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了. 第二步,表头部显示CheckBox,点击实现全选|反选功能: 我们切换回源代码,找到AspxGridView的GridViewCommandColumn列,在该列中增加 <Hea