JS如何实现对name是数组的复选框的全选和反选以及取消选择-阿里云开发者社区

开发者社区> 技术小牛人> 正文

JS如何实现对name是数组的复选框的全选和反选以及取消选择

简介:
+关注继续查看

JS如何实现对name是数组的复选框的全选和反选以及取消选择? form内容如下:

因为PHP接收要用 数组形式的 复选框,正常情况下 JQ可如果是这种

直接使用 $("input[name=ptpt])即可。但是这种php接收的只是最后一个值,字符串。
<label><input type='checkbox' name='ptpt' value='a1' />a1</label>
<label><input type='checkbox' name='ptpt' value='a3' />a3</label>
<label><input type='checkbox' name='ptpt' value='a6' />a6</label>
<label><input type='checkbox' name='ptpt' value='a9' />a9</label>


这样PHP接收的是一个 ptpt的数组

<form method="post" id="form1" name="form1" action="" >
<label><input type='checkbox' name='ptpt[1]' value='a1' />a1</label>
<label><input type='checkbox' name='ptpt[3]' value='a3' />a3</label>
<label><input type='checkbox' name='ptpt[6]' value='a6' />a6</label>
<label><input type='checkbox' name='ptpt[9]' value='a9' />a9</label>
<input type="button" value="全选" onclick=""> 
<input type="button" value="反选" onclick=""> 
<input type="button" value="取消全选" onclick=""> 




<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var chks = $(':checkbox[name^="ptpt["]');  //匹配name开头为 ptpt[ 的部分
$(':button:eq(0)').click(function(){
chks.attr('checked','checked');
})
$(':button:eq(1)').click(function(){
chks.each(function(){
if($(this).attr('checked')=='checked')
$(this).removeAttr('checked');
else
$(this).attr('checked','checked');
});
})
$(':button:eq(2)').click(function(){
chks.removeAttr('checked');
})
})
</script>

本文转自  陈小龙哈   51CTO博客,原文链接:http://blog.51cto.com/chenxiaolong/1857132

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js 颜色选择插件
COLPICK是一款非常的轻小,无需图片就可以实现颜色选择器的jquery插件,只用 JS 和 CSS 就实现了全部功能,而且非常直观,类似Photoshop的界面,使用方便。颜色的明暗很容易自定义,整个整个都是用html5+ CSS3实现外观而,插件只有28 KB,浏览器加载速度可以说是非常快的,而在低于IE9的版本也可以使用,只需载入了支持html5的html5shiv.
906 0
服务器建设选择阿里云
公司因为业务需求,需要来服务器托管微信公众号平台。之前我们先是自建服务器,然后就是使用IDC机房托管服务器,后来因为种种原因,最后转到了阿里云上云。很多同学会有疑问,为什么已经有了自建服务器,还需要去IDC机房托管,最后又去上云呢? ​因为在自建服务器的时候,这个服务器是由我们公司一群参差不齐不齐的"网络工程师"一起弄的。这群吃货,往往是对编程语言有所了解,但对硬件了解的不甚多。所以在遇到单点故障的时候,大家都一脸懵逼。还有,遇到宕机的时候,我们还需要为每个硬件准备冗余,部署与维护成本成本就上去了。
347 0
ThingJS:物联网系统开发,不要选择单一的供应商
成功没有捷径,通过不断磨合,ThingJS开发出能够被集成到多种领域解决方案中的堆栈的横向元素
180 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4519 0
不要争了!技术选择没那么重要
摘要: 技术没有高下之分,做好产品才是王道。 很多开发者非常热衷于比较不同技术,比如:Angular 是否比 Vue.js 更好?Node.js 能否取代 Java?究竟应该选择 MySQL 还是 MongoDB 呢? 认真对比不同技术之间的优劣是非常有价值的事,可以加深我们对技术的理解,根据业务场景选择更合适的技术。
3529 0
如何根据阿里云服务器 选择香港或大陆地区,他们的区别在哪里 如何选择?
阿里云香港服务器是很常见的建站主机,不管平时还是做活动时候都经常能见到其身影。主要特点是网络对中国大陆优化过,国内三网直连。这么多特点的香港云服务器和大陆云服务器区别在哪?本文会详细介绍阿里云香港服务器和大陆服务器的区别在哪里及如何选择。
830 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3278 0
3445
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载