文档章节

全选,反选及jQuery1.9.1针对checkbox的调整

横着走的螃蟹
 横着走的螃蟹
发布于 2015/03/27 10:50
字数 267
阅读 26
收藏 0
点赞 0
评论 0

1.原生js实现全选、反选等功能

<!DOCTYPE html>
<html>
<head>
	<title>全选</title>
</head>
<body>
<input id="btn1" type="button" value="全选"><br />
<input id="btn2" type="button" value="不选"><br />
<input id="btn3" type="button" value="反选"><br />
<div id="for_check">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
<script type="text/javascript">
	var mybtn1 = document.getElementById('btn1');
	var mybtn2 = document.getElementById('btn2');
	var mybtn3 = document.getElementById('btn3');
	var mydiv = document.getElementById('for_check');
	var mycheck = mydiv.getElementsByTagName('input');

	mybtn1.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			mycheck[i].checked=true;
		}
	};

	mybtn2.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			mycheck[i].checked=false;
		}
	};

	mybtn3.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			if(mycheck[i].checked==true) {
				mycheck[i].checked=false;
			}else{
				mycheck[i].checked=true;
			};
		}
	};
</script>
</body>
</html>

2.使用jquery选择要注意版本问题,对于1.9以上的版本要注意

$(".ppp").attr("checked",true);
换成:
$(".ppp").prop("checked",true);
如果不换先设置flase再设置ture,设置的ture无效


© 著作权归作者所有

共有 人打赏支持
横着走的螃蟹
粉丝 13
博文 131
码字总数 29165
作品 0
朝阳
高级程序员
DWZ框架v1.1.6 发布

V1.1.6 Final DWZ中jQuery版本从1.4.2升级到1.4.4 navTab组件重复打开同一个页面时是否重新加载数据控制: navTab.openTab(tabid, url, { title:”New Tab”, flesh:false, data:{} }); 解决d...

张慧华
2011/01/08
3.5K
0
checkbox的常用操作

声明:如果你想去看具体的例子,请下载压缩包:checkbox-demo.rar就行了! 里面包括checkbox的基本操作的例子,以及一个淘宝的小例子!! Checkbox的操作基本上就几种:选中,未选中,全选,...

技术小胖子
2017/10/31
0
0
小博老师演示常用JQuery效果 ——复选框全选和反选效果

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [步骤解读一]界面布局...

博为峰教研组
2016/11/18
13
0
jquery如何判断checkbox(复选框)是否被选中

都知道 在html 如果一个复选框被选中 是 checked="checked"。 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断 if($("#id").attr("ch...

老鸟的空间
2014/08/05
0
0
复选框问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> </style......

李永china
2016/09/26
3
0
A example for Jquery--deal with html checkbox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met......

Adam-Lee
2011/09/22
0
0
php全选,反选,不选 和 选中批量删除和分页代码

php全选,反选,不选 和 选中批量删除和分页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm......

招PHP程序员
2011/01/10
0
0
小段code_TagName/onload_实现全选不选反选

下面代码是实现全选、不选和反选的功能:由于javascript 是解释型语言,读一句执行一句,当script标签中获取的元素在之后出现,将出现错误,可以用window.onload解决这个问题,使其在加载完整...

cd_ing
2013/12/14
0
0
关于checkbox的传值和选择的个人总结

在struts2中传值,一个表单里有两个方法,查询时候用了表单中的方法,删除时候必须通过节点获取表单,然后在给它赋值指定方法。 <%@ page language="java" pageEncoding="UTF-8"%> <% Strin...

功夫panda
2012/08/30
0
0
Ant Design 2.10.0 发布,阿里前端设计语言&前端框架

Ant Design 2.10.0 发布了,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 更新如下: LocaleProvider 新增繁体中文。 新增芬兰语。 新增越...

王练
2017/05/06
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

javascript前端AES加密解密

参考了一下网上的代码加上自已的一些想法,修改,key也可以是中文, 要引入一个aes.js的js文件。 html代码 <html> <head> <title>AES加解密</title> <meta http-equiv="Content-Type"......

oisan_
8分钟前
0
0
MacOS和Linux内核的区别

有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我们来看...

六库科技
13分钟前
0
0
Vue.js-自定义事件例子

自定义组件的 v-model 2.2.0+ 新增 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m...

tianyawhl
16分钟前
0
0
mybatis中获取sqlSession的源码分析

0 SqlSessionFactoryBuilder类 SqlSessionFactoryBuilder sqlSessionFacotory=SqlSessionFactoryBuilder().build(reader) public SqlSessionFactory build(Reader reader) { return build(re......

writeademo
17分钟前
0
0
RobotThread.cpp

#include "RobotThread.h"RobotThread::RobotThread(int argc, char** pArgv, const char * topic) :m_Init_argc(argc), m_pInit_argv(pArgv), m_topic(topic){/** ......

itfanr
19分钟前
0
0
防御ddos攻击的常见方法

DDoS攻击是一种特殊形式的拒绝服务攻击。它利用多台已经被攻击者所控制的机器对某一台单机发起攻击,在带宽相对的情况下,被攻击的主机很容易失去反应能力。分布式拒绝服务攻击(DDoS) 是一种...

上树的熊
19分钟前
0
0
Vue全家桶问题合集(很多eslint规范问题)

自己使用Vue全家桶问题合集(很多eslint规范问题) 遇到很多问题一一道来。 1.vue报错 Do not use built-in or reserved HTML elements as component id:header 组件,不能和html标签重复 he...

kisshua
21分钟前
0
0
Spring框架中的设计模式(四)​

Spring框架中的设计模式(四) 本文是Spring框架中使用的设计模式第四篇。本文将在此呈现出新的3种模式。一开始,我们会讨论2种结构模式:适配器和装饰器。在第三部分和最后一部分,我们将讨...

瑞查德-Jack
26分钟前
0
0
如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联

随着微信小程序新功能、新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道。Jeewx平台专注小程序的开发,逐步完善小程序生...

Jeecg
31分钟前
0
0
IDEA开发vue.js卡顿

由于新项目使用了vue.js。在执行cnpm install后会在node_modules这个文件下面生成vue的相关依赖文件,这个时候当执行npm run dev命令时,会导致IDEA出现卡死的问题。 解决办法:在idea中设置...

落雪飞声
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部