Jquery 复选框全选与反选点击执行一次然后失效解决方案

在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下

代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串。

解决方案一:

代码如下:

<html>
<head>
  <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
  <input type="checkbox" name="chk_list[]" value="1" />1
  <input type="checkbox" name="chk_list[]" value="2" />2
  <input type="checkbox" name="chk_list[]" value="3" />3
  <input type="checkbox" name="chk_list[]" value="4" />4
  <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
  $("#chk_all").click(function(){
   // 使用attr只能执行一次
   $("input[name=‘chk_list[]‘]").attr("checked", $(this).attr("checked"));
   // 使用prop则完美实现全选和反选
   $("input[name=‘chk_list[]‘]").prop("checked", $(this).prop("checked"));
    // 获取所有选中的项并把选中项的文本组成一个字符串
   var str = ‘‘;
   $($("input[name=‘chk_list[]‘]:checked")).each(function(){
   str += $(this).next().text() + ‘,‘;
   });
   alert(str);
  });
</script>
</body>
</html>

总结:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

参考 http://www.jb51.net/article/62308.htm

<script type="text/javascript">
            jQuery(function($) {
//                给全选添加点击事件
                $("[name=‘allSel‘]").click(function(){
                    if($(this).is(‘:checked‘)){
                        $("[name=‘select‘]").prop(‘checked‘,true);
                    }else{
                        $("[name=‘select‘]").prop(‘checked‘,false);
                    }
                });
                //给复选框添加点击事件
                $("[name=‘select‘]").click(function(){
                    var allSel = false;
                    $("[name=‘select‘]").each(function(){
                        if(!$(this).is(‘:checked‘)){
                            allSel = true;
                        }
                    })
                    //如果有checkbox没有被选中
                    if(allSel){
                        $("[name=‘allSel‘]").prop(‘checked‘,false);
                    }else{
                        $("[name=‘allSel‘]").prop(‘checked‘,true);
                    }
                })

            });
        </script>

时间: 2024-08-02 13:17:17

Jquery 复选框全选与反选点击执行一次然后失效解决方案的相关文章

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实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

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

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

复选框全选/全部选

复选框全选/全部选 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function() { /* 全选按钮点击按钮以后,四个多选框全部被选中 */ // 为idcheckedAllBtn的按钮绑

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft