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

相关文章
|
2月前
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
4月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
181 0
|
5月前
|
JavaScript
js动态添加复选框&动态勾选对应的值
我的js对应的代码(下面代码实现了js拼接input标签和lable标签实现的显示效果)
|
5月前
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
29 0
|
7月前
|
JavaScript 前端开发
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
47 0
|
12月前
|
JavaScript SQL 前端开发
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现)
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现) 给复选框添加编辑后事件,事件使用Javascript,具体的js如下
430 0
|
JavaScript 前端开发
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
67 0
|
JavaScript 前端开发
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
本期主要介绍案例 :复选框全选-全不选&省市二级联动以及课外扩展
69 0
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
|
JavaScript 前端开发
|
JavaScript 前端开发
【JavaScript】循环获取复选框的值
【JavaScript】循环获取复选框的值
71 0
【JavaScript】循环获取复选框的值
相关产品
云迁移中心
推荐文章
更多