`

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

阅读更多

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> 
</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库文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery

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

$("#all").click(function(){    
    if(this.checked){    
        $("#list :checkbox").attr("checked", true);   
    }else{    
        $("#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"));   
    }); 
    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).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    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);   
        }else{    
            $("#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"));   
         }); 
         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).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
}  声明:源于helloweba.com原文接:http://www.helloweba.com/view-blog-254.html
分享到:
评论

相关推荐

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery实现全选和反选小功能

    很好用的使用jquery来实现的通用的全选反选功能

    jquery 实现全选,全不选,反选,获取选中的值

    综上所述,使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器,我们可以轻松地响应用户的交互,动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式,可以创建出...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在网页开发中,jQuery 是一个广泛使用...通过以上介绍,我们可以利用 jQuery 实现复选框的全选、反选和全不选功能,同时结合表单验证插件,确保用户按照规定进行输入。在实际应用中,可以根据具体需求进行调整和优化。

    jquery实现全选反选功能

    jquery实现全选反选功能,代码可以直接使用,可应用于实际项目当中。

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    jQuery表格行全选反选单选代码

    jQuery表格行全选反选单选代码,例子采用bootstrap格式,可以选择自定义。

    jquery全选反选插件

    本话题将深入探讨“jQuery全选反选插件”的相关知识点,这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行...

    JQuery实现全选、全不选、反选功能

    JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时,页面中所有的复选框都应该为选中状态, 1.1、当再次点击'全选'按钮时,所有的复选框应该是非选中状态。 1.2、当点击子复选框时,'全选'按钮应该是非选中...

    简单实现全选反选功能(html)

    在网页开发中,全选和反选功能是常见的交互元素,尤其在表格或者多选项列表中,用户可能希望一键选择所有项目或清除已选。在这个案例中,我们将探讨如何使用HTML和jQuery来实现这一功能。 首先,我们需要创建HTML...

    Js/Jquery 实现checkbox全选,反选,全不选

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先,我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`,它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    【JavaScript源代码】jQuery实现全选反选操作案例.docx

    在本篇文档中,我们将探讨如何使用jQuery库来实现全选和反选的功能。这个案例主要涉及HTML表格中的复选框以及与之相关的jQuery事件处理。以下是对代码的详细解析: 首先,HTML部分包含了表格结构,其中每个表格行`...

    Jquery全选反选Checkbox

    总结来说,"Jquery全选反选Checkbox"是一个提高用户体验的实用功能,通过jQuery的DOM操作和事件处理,我们可以轻松实现全选和反选的效果。而提供的压缩包资源则提供了具体的实现代码,便于开发者学习和使用。

    jQuery全选、反选与获取选中值

    本文将深入探讨jQuery中关于“全选”、“反选”以及“获取选中值”的相关知识点,帮助你更好地理解和应用这些功能。 ### 一、jQuery全选 全选功能通常应用于多选列表或表格中,允许用户一次性选择所有选项。在...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jQuery全选反选及批量删除

    "jQuery全选反选及批量删除"是一个常见的交互功能,常用于表格或列表的管理,例如用户可以选择多个项目进行批量操作,如删除。这里我们将深入探讨如何实现这个功能。 首先,我们需要了解jQuery的选择器和事件绑定。...

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

    本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据...总的来说,实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS(用于样式),这是一项基础但重要的交互设计。理解并掌握这个功能,有助于提升网页的用户体验。

    jQuery实现全选、反选和不选功能的方法详解

    本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考,具体如下: 适用于网页多选后需要进行批量操作的场景(如批量删除等)。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

Global site tag (gtag.js) - Google Analytics