jQuery实现全选、反选和不选功能

HTML

我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。


1

2

3

4

5

6

7

8

9

10

11

12

13

<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>

</ul>

<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时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。


1

2

3

4

5

6

7

$("#all").click(function(){ 

  if(this.checked){ 

    $("#list :checkbox").prop("checked", true);

  }else{ 

  $("#list :checkbox").prop("checked", false);

  } 

});

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


1

2

3

$("#selectAll").click(function () {

  $("#list :checkbox,#all").prop("checked", true);

});

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


1

2

3

$("#unSelect").click(function () {

  $("#list :checkbox,#all").prop("checked", false);

});

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


1

2

3

4

5

6

$("#reverse").click(function () {

  $("#list :checkbox").each(function () {

    $(this).prop("checked", !$(this).prop("checked"));

  });

  allchk();

});

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

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


1

2

3

4

5

6

7

8

$("#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也要相应的变为未选中状态。


1

2

3

4

//设置全选复选框

$("#list :checkbox").click(function(){

  allchk();

});

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

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代码整理在一起，供大家参考。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

$(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);

 }

}

原文地址：https://www.cnblogs.com/phplearn/p/10610291.html

时间： 2024-11-08 17:15:59

jQuery实现全选、反选和不选功能的相关文章

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

jquery的全选，全不选，反选

jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryselect.aspx.cs" Inherits="WebApplication9.jqueryselect" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

jquery实现全选、全不选和反选

全选和全不全都实现都比较简单 $('input:checkbox').attr('checked','checked'); //全选 $('input:checkbox').removeAttr('checked'); //全不选 反选分三步:1找到所有已选的checkbox,2将所有的checkbox设置为选中,3将之前找到的已选checbox设置为不选(如有更好的方法请留言讨论) var checked = $('input:checkbox:checked'); //找到所有已选的chec

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

利用JQuery实现全选和反选的几种方法

前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方法一思路:1.导入jQuery库,这个网上可以下载,是免费开源的,2.设置class为fruit,通过prop设置它们的属性. 方法一:jQuery代码: 1 //定义标识,true表示选中 2 var chkall = true; 3 $(function () { 4 //全选按钮设置点击事件

jQuery实现的全选、反选和不选功能

适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> <l

jQuery实现checkbox（复选框）选中、全选反选代码

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

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2