二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
性格开朗的我,等待你的到来
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
HTML代码：
1//全选，全不选按扭2&input&type="checkbox"&onClick="selectOrNot(this);"&/&34//分页中的CHECKBOX5&input&type="checkbox"&id="checkbox_${i-1}"&value="${subpage.classId}"/&
阅读(705)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'分页中，用JS进行全选、全不选、反选以及得到选中框信息的ID值',
blogAbstract:'&1&script&language=\"javascript\"&',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:6,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'性格开朗的我,等待你的到来',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}jquery实现简单的全选和反选功能
投稿：hebedich
字体：[ ] 类型：转载 时间：
我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。
首先我们看个简单的实例
&!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 runat="server"&
&title&jQuery实现CheckBox全选、全不选&/title&
&script src="/jquery-1.4.4.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked);
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
&input id="checkAll" type="checkbox" /&全选
&input name="subBox" type="checkbox" /&项1
&input name="subBox" type="checkbox" /&项2
&input name="subBox" type="checkbox" /&项3
&input name="subBox" type="checkbox" /&项4
下面再给大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的前端开发爱好者。
引入jquery库
&script src="/ajax/libs/jquery/1.10.2/jquery.min.js"&&/script&
一般从数据库读出来的列表都需要批量选中以便删除与编辑等，下面我们就来模拟下，实现复选框checkbox的全选与不选，先建立html
&ul id="list"&
&li&&label&&input type="checkbox" value="1"& 1.我是记录来的呢&/label&&/li&
&li&&label&&input type="checkbox" value="2"& 2.哈哈，真的太天真了&/label&&/li&
&li&&label&&input type="checkbox" value="3"& 3.爱上你是我的错吗？&/label&&/li&
&li&&label&&input type="checkbox" value="4"& 4.从开始你就不应用爱上我&/label&&/li&
&li&&label&&input type="checkbox" value="5"& 5.喜欢一个人好难&/label&&/li&
&li&&label&&input type="checkbox" value="6"& 6.你在那里呢&/label&&/li&
&input type="checkbox" id="all"&
&input type="button" value="全选" class="btn" id="selectAll"&
&input type="button" value="全不选" class="btn" id="unSelect"&
&input type="button" value="反选" class="btn" id="reverse"&
&input type="button" value="获得选中的所有值" class="btn" id="getValue"&
jQuery 代码
1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").attr("checked", true);
$("#list :checkbox").attr("checked", false);
2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时，列表中所有的选项都会被选中，包括全选旁边的复选框也是选中状态。
$("#selectAll").click(function () {
$("#list :checkbox,#all").attr("checked", true);
3、全不选。当点击全不选按钮#unSelect时，列表中所有的选项都是未选中状态，当然包括#all也是未选中状态。
$("#unSelect").click(function () {
$("#list :checkbox,#all").attr("checked", false);
4、反选。当点击反选按钮#reverse，列表中所有被选中的选项变为未选中状态，而所有未选中的选项变为已选中状态，当然也要注意#all的状态。
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
代码中遍历了选项列表，然后改变checked属性，最后调用函数allchk()，后面将介绍该函数。
5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值，我们通过遍历数组，将选中项的值存放在数组中，最后组成由逗号(,)隔开的字符串，开发者就可以通过获取这个字符串进行相应的操作了。
$("#getValue").click(function(){
var valArr = new A
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
var vals = valArr.join(',');//转换为逗号隔开的字符串
alert(vals);
为了完善选中选项功能，我们在单击列表中某个选项时，如果勾选的项刚好满足全部选中的条件，则#all也要相应的变为选中状态，同样，如果事先所有的选项是选中状态时，当取消勾选某个选项时，那么#all也要相应的变为未选中状态。
//设置全选复选框
$("#list :checkbox").click(function(){
函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的，请看代码。
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).attr("checked")==true){
if(chknum==chk){//全选
$("#all").attr("checked",true);
}else{//不全选
$("#all").attr("checked",false);
jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。以下我将所有jQuery代码整理在一起，供大家参考。
$(function () {
//全选或全不选
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").attr("checked", true);
$("#list :checkbox").attr("checked", false);
$("#selectAll").click(function () {
$("#list :checkbox,#all").attr("checked", true);
$("#unSelect").click(function () {
$("#list :checkbox,#all").attr("checked", false);
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
//设置全选复选框
$("#list :checkbox").click(function(){
//获取选中选项的值
$("#getValue").click(function(){
var valArr = new A
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
var vals = valArr.join(',');
alert(vals);
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).attr("checked")==true){
if(chknum==chk){//全选
$("#all").attr("checked",true);
}else{//不全选
$("#all").attr("checked",false);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS如何实现对name是数组的复选框的全选和反选以及取消选择？ form内容如下：_百度知道
JS如何实现对name是数组的复选框的全选和反选以及取消选择？ form内容如下：
value=' value=' name=' onclick=&a6&label&
name='/label&form1& value=' action=&ptpt[3]'input type=' id=& name='全选& name='&post&&/ptpt[1]' name=&label& value=&
&button&&a6'&label&&/a3' /
&label& & onclick=&input type=&a9'a9&checkbox'& /input type='checkbox'
&input type=&
&lt& value='&&input type='&我的程序语言;/button&label&&ptpt[9]'form method=& value=&a3&&button& onclick=&input type='input type=&a1' &ptpt[6]'/ &lt，需要同时获取value和ptpt里面的值;&checkbox' value=&反选&a1&label&&& &#47，name里无值）;&
&checkbox'label&form&gt，所以不同于一般的复选框的全选反选（一般的复选框;取消全选&& /form1&quot，请JS高手帮忙
value='&&/dddd&&dddd'label& value='input type='&&label& value='aaaa'/&gt，让人觉得name里面的值和value有关联;checkbox' /&lt不好意思; name='input type='ptpt[1]&#39，重新写几个，另外之所以name写成name=ptpt[num]这样的形式;cccc&checkbox' /bbbb'checkbox'ptpt[9]'ptpt[3]'&#47，是因为程序语言PHP不支持不带[]的形式&/label&checkbox' /&aaaa&&input type='input type='label& value='& name='bbbb& &#47，其实是无关联的;ptpt[6]'label&label&cccc'
name='& name='label&gt，我给出的input可能有点误会;label&gt
提问者采纳
其实你的ptpt后面的数字和value里数字是对应的吧，你也说了不同于一般的复选框，那个数字可以从value里得到啊。那就和普通的一样了啊复选框的name应该是相同的猜对，那么你可以用相同的name
我在程序语言里可以用数组的形式获取递交来的$POST_['ptpt']，然后可以分别获取键和值，这种name=&ptpt[num]&的写法，HTML也是支持的，另外我这么写也是迫不得已，因为php仅支持这种写法，如果不加[]会导致PHP只能获取最后一个复选框的值
&html&&head&&/head&&body&&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=&selectAll()&& &input type=&button& value=&反选& onclick=&reverse()&& &input type=&button& value=&取消全选& onclick=&deSelectAll()&&
&/form&&script language=&javascript&&function selectAll(){var ptpts=document.getElementsByTagName(&input&);alert(ptpts.length);for(var i=0;i&ptpts.i++){if(
ptpts[i].type ==&checkbox&){ptpts[i].checked=&checked&;}}}function deSelectAll(){var ptpts=document.form1.getElementsByTagName(&input&);for(var i=0;i&ptpts.i++){if(ptpts[i].type
==&checkbox&){ptpts[i].checked=&&;}}}function reverse(){var ptpts=document.form1.getElementsByTagName(&input&);for(var i=0;i&ptpts.i++){if(ptpts[i].type
==&checkbox&){if(ptpts[i].checked){ptpts[i].checked=&&;}else{ptpts[i].checked=&checked&;}}}}&/script&&/body&&/html&不过有个问题啊，这个是去所有checkbox。如果你页面还有其他checkbox，你需要自己再过滤一下。
很感谢你，这么认真的帮我解答问题。另外关于过滤，如何通过Input的class来过滤呢？我刚才试了下加了一个新的&inpt type=&checkbox& id=&test& /&，然后if处变为if(ptpts[i].type
==&checkbox& && ptpts[i].id!='test')这样是可以的，但ID有唯一的局限性，如何用class呢？谢谢
ptpts[i].className!='class1'
提问者评价
谢谢你帮我大忙了
其他类似问题
checked&#39.click(function(){
chks:checkbox[name^=&quot.attr(');.7;checked')==&#39:eq(1)&#39.click(function(){;)
$(this);script&gt:eq(0)'&gt.2;);&lt.);
$('checked'/script src=&checked'&
$(function(){
var chks = $(&#39:button.js&checked'
&]&#39.click(function(){
chks:script&&#47.attr(&#39,';checked&#39.removeAttr(').each(function(){
if($(this);ptpt[&checked':);checked'),';
$(').attr(');
$(this);script&
}):eq(2)'
&lt.removeAttr('jquery-1
亲，能有不用jquery的么，因为我这边禁止使用……谢了
window.onload = function(){
var inputs = document.getElementsByTagName('input');
var cheks = [],buttons = [];
for(var i = 0 ; i & inputs. i ++){
if(inputs[i].type=='checkbox')cheks.push(inputs[i]);
else if(inputs[i].type=='button')buttons.push(inputs[i]);
buttons[0].onclick = function(){
for(var i = 0 ; i & cheks. i ++){
cheks[i].checked = 'checked';
buttons[1].onclick = function(){
for(var i = 0 ; i & cheks. i ++){
if(cheks[i].checked == true) cheks[i].checked =
else cheks[i].checked = 'checked';
buttons[2].onclick = function(){
for(var i = 0 ; i & cheks. i ++){
cheks[i].checked =
为您推荐：
其他3条回答
ptpt[1]&#39。&a1' ptpt='&&#47，里面存储你想获得的ptpt值;input type='p'p'input type='checkbox'checkbox'
ptpt=&#39，像下面这样&lt，再给多选框多加一个属性;& name='这样在获得选中的多选框后直接取ptpt属性的值就可以拿到你想要的ptpt的值了;ptpt[1]' name='a2' value='& value=' /&我的理解就是你想获取多选框的值和他名字的值（不理解就是名字的字符串值还是所代表数组的值）。你可以把多选框的名字都写成一样的;input type='ptpt[2]'checkbox' name='a1'/ value=&#39不明白你的意思
你可能不太了解，PHP语言有个问题，如果input的name值一样的话，他只能获取最后一个选中项，不像ASP或者其他，能获取数组形式，这也是我为什么把name写成ptpt[num]的形式，这样PHP才能获取。但网上的全选、反选Model不支持name=&ptpt[num]'这样的格式
function selAll(){
for(i=0;i&document.form2.arcID.i++)
if(!document.form2.arcID[i].checked)
document.form2.arcID[i].checked=
} } function noSelAll(){
for(i=0;i&document.form2.arcID.i++)
if(document.form2.arcID[i].checked)
document.form2.arcID[i].checked=
} }&inputname=&arcID& type=&checkbox& id=&arcID& value=&331& class=&np& /&111 &inputname=&arcID& type=&checkbox& id=&arcID& value=&332& class=&np& /&222
取到form中所有checkbox的list，判断点击了那个按钮，如果全选就在for中给他们加上checked=true,以此类推，后面得功能都是这个样
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
字体：[ ] 类型：转载 时间：
本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
jQuery判断checkbox（复选框）是否被选中：if($("#id").attr("checked")==true)
jQuery实现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&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&jQuery如何判断checkbox（复选框）是否被选中以及全选、反选&/title&&script type="text/javascript" src="jquery.js"&&/script&&script type="text/javascript"&&!--$("document").ready(function(){&$("#all").click(function(){&& & if(this.checked){&& && $("input[name='checkbox']").each(function(){this.checked=});&& $("#btn1").attr("value","反选");&& & }else{&& && $("input[name='checkbox']").each(function(){this.checked=});&& && $("#btn1").attr("value","全选"); & }&& &});&$("#btn1").click(function(){& $("[name='checkbox']").attr("checked",'true');//全选&});&$("#btn2").click(function(){& $("[name='checkbox']").removeAttr("checked");//取消全选&});&$("#btn3").click(function(){& $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数&});&$("#btn4").click(function(){& $("[name='checkbox']").each(function(){&& if($(this).attr("checked"))&& {&&& $(this).removeAttr("checked");&& }else{&&& $(this).attr("checked",'true');&& }& });&});&$("#btn5").click(function(){& var str="";& //$("input:checkbox[name='checkbox']:checked").each(function(){//可以& $("[name='checkbox'][checked]").each(function(){&& str+=$(this).val()+"\r\n";& });& alert(str);&});});
//--&&/script&&/head&
&body&&&& &form name="form1" method="post" action=""&&&&& &input type="checkbox" id="all" name="all"&&&&&&&& &input type="button" id="btn1" value="全选"&&&&&&&& &input type="button" id="btn2" value="取消全选"&&&&&&&& &input type="button" id="btn3" value="选中所有奇数"&&&&&&&& &input type="button" id="btn4" value="反选"&&&&&&&& &input type="button" id="btn5" value="获得选中的所有值"&&&&&&&& &br /&&&&&&&& &input type="checkbox" name="checkbox" value="checkbox1"&checkbox1&&&&&&& &input type="checkbox" name="checkbox" value="checkbox2"&checkbox2&&&&&&& &input type="checkbox" name="checkbox" value="checkbox3"&checkbox3&&&&&&& &input type="checkbox" name="checkbox" value="checkbox4"&checkbox4&&&&&&& &input type="checkbox" name="checkbox" value="checkbox5"&checkbox5&&&&&&& &input type="checkbox" name="checkbox" value="checkbox6"&checkbox6&&&&&&& &input type="checkbox" name="checkbox" value="checkbox7"&checkbox7&&&&&&& &input type="checkbox" name="checkbox" value="checkbox8"&checkbox8&&& &/form&&/body&&/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具下次自动登录
现在的位置:
& 综合 & 正文
DeveXpress ASPxGridView获取要批量删除或者批量更改的Id（AspxGridView复选框的全选|反选功能）
第一步，显示checkbox按钮；
点击AspxGridView的columns，你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn C默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了。
第二步，表头部显示CheckBox，点击实现全选|反选功能；
我们切换回，找到AspxGridView的GridViewCommandColumn列，在该列中增加
&HeaderTemplate&
&dx:ASPxCheckBox ID="DchkAll" runat="server" ClientSideEvents-CheckedChanged="function(s,e){DgvwEmail.SelectAllRowsOnPage(s.GetChecked());}"&
&/dx:ASPxCheckBox&
&/HeaderTemplate&
&HeaderStyle HorizontalAlign="Center" /&
我们在HeaderTemplate增加一个Dev的CheckBox按钮，设置他的样式为HorizontalAlign="Center" ,呈居中状态，我们给这个CheckBox按钮ClientSideEvents-CheckedChanged增加了一个方法function(s,e){DgvwEmail.SelectAllRowsOnPage(s.GetChecked());}，DgvwEmail为你AspxGridView控件的ID，到此，你就实现了表头部的全选|反选功能了；
第三步，获取选中行的ID，实现批量删除或更改；
我们在页面中增加一个Dev的Button按钮，给按钮添加点击事件;
首先我们写一个方法获取到所有选中行的ID
protected string GetDelID()
string delId = "";
//获取选中的记录Id
List&object& lSelectValues = DgvwEmail.GetSelectedFieldValues("ID");
for (int i = 0; i & lSelectValues.C i++)
delId += lSelectValues[i] + ",";
delId = delId.Substring(0, delId.LastIndexOf(','));
return delId;
这个方法获取到了选中行的的Id，通过AspxGridView.GetSelectedFieldValues("ID")获取绑定数据时的Id主键，然后遍历所获得ID；
接下来步骤就和写其他的全选删除一样，自己可以试着去写写。
&&&&推荐文章:
【上篇】【下篇】}