jq 全选、反选、判断选中的条数

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){
    if(this.checked){
        $("#list :checkbox").prop("checked", true);
    }else{
    $("#list :checkbox").prop("checked", false);
    }
})

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () {
   $("#list :checkbox,#all").prop("checked", true);
});

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态

$("#unSelect").click(function () {
   $("#list :checkbox,#all").prop("checked", false);
});

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

$("#reverse").click(function () {
    $("#list :checkbox").each(function () {
        $(this).prop("checked", !$(this).prop("checked"));
    });
	allchk();
});

上述代码中遍历了选项列表,然后改变checked属性,调用函数allchk()是干什么的,别急,留在后面介绍。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){
	var valArr = new Array;
    $("#list :checkbox[checked]").each(function(i){
		valArr[i] = $(this).val();
    });
	var vals = valArr.join(‘,‘);//转换为逗号隔开的字符串
    alert(vals);
});

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

//设置全选复选框
$("#list :checkbox").click(function(){
	allchk();
});

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

function allchk(){
	var chknum = $("#list :checkbox").size();//选项总个数
	var chk = 0;
	$("#list :checkbox").each(function () {
        if($(this).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全选
		$("#all").prop("checked",true);
	}else{//不全选
		$("#all").prop("checked",false);
	}
}

总结

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

$(function () {
	//全选或全不选
	$("#all").click(function(){
    	if(this.checked){
        	$("#list :checkbox").prop("checked", true);
    	}else{
		$("#list :checkbox").prop("checked", false);
    	}
 	});
	//全选
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);
    });
	//全不选
    $("#unSelect").click(function () {
         $("#list :checkbox,#all").prop("checked", false);
    });
    //反选
    $("#reverse").click(function () {
         $("#list :checkbox").each(function () {
              $(this).prop("checked", !$(this).prop("checked"));
         });
		 allchk();
    });

	//设置全选复选框
	$("#list :checkbox").click(function(){
		allchk();
	});

	//获取选中选项的值
	$("#getValue").click(function(){
		var valArr = new Array;
        $("#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).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全选
		$("#all").prop("checked",true);
	}else{//不全选
		$("#all").prop("checked",false);
	}
}

 获取选中的条数

$("table :checkbox:checked").size()==0

  

时间: 2024-10-04 00:03:43

jq 全选、反选、判断选中的条数的相关文章

Jquery 1.8全选反选删除选中项实现

JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () { $('input[type=checkbox]').prop('checked', $(this).prop('checked')); }); 找到选中项的JQ代码: $("input:[type='checkbox'][checked]") JQ1.6以下的全选反选效果: if (

JQ全选反选

<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collaps

checkbox的全选,取消全选,获得选中值

<html> <head> <title>jq全选以及获得选中项的值</title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.4.1/jquery.js"></script> <script> $(function() { $("#select").click

关于列表中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

jQuery实现checkbox(复选框)选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr

JQ 全选设定与设置选中

复选数据框 <!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="Co

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

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

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

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

jQuery全选反选插件的写法

jQuery全选反选插件,经易让你实现一个表单列表数据的全选与取消全选功能,内含示例,小巧实用.自动判断当前选中数量,加上全选.在没有jQuery之前,我们需要一大段js代码来实现这种效果.有了jQuery这个强大的库之后,我们可以很方便的开发实现这种效果的jQuery插件.我将它命名为jQuery.fn.check插件.前端框架分享 在构建我们的插件之前,我们想考虑一下其功能需求: 所有复选框的状态都随全选复选框的状态而发生变化:如果所有复选框都被选中时,全选复选框立即处于选中状态:如果当前选