在后台管理中经常会遇到列表全选和取消的功能，如评论审核、申请等，用到的html标记就是checkbox。我用的是mysql数据库，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>全选和取消全选</title>

</head>

<body>

<table>

    <!-- 这里用整形的数字编号作为值-->

    <tr><td><input type="checkbox" class="check" value="1"/>苹果</td></tr>

    <tr><td><input type="checkbox" class="check" value="2"/>梨子</td></tr>

    <tr><td><input type="checkbox" class="check" value="3"/>橘子</td></tr>

    <tr><td><input type="checkbox" class="check" value="4"/>香蕉</td></tr>

    <tr><td><input type="checkbox" class="check" value="5"/>番茄</td></tr>

    <tr><td><input type="checkbox" class="check" value="6"/>黄瓜</td></tr>

    <tr><td><input type="checkbox" class="check" value="7"/>土豆</td></tr>

    <tr><td><input type="checkbox" class="check" value="8"/>莲藕</td></tr>

    <tr><td><input type="checkbox" id="choose"/>全选/取消</td><td id="do_choose">确定</td></tr>

</table>

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

<script>

    //全选和取消

    $('#choose').click(function(){

        if($(this).attr('checked') == 'checked'){//全选

            $('input.check').attr('checked', 'checked');

        }else{//取消全选

            $('input.check').removeAttr('checked');

        }

    });

    //获取选择的值

    $('#do_choose').click(function(){

        var test = $('input.check:checked');

        console.log(test);

        if(test.length == 0){

            alert('请选择！');

        }else{

            var str = '';

            test.each(function(i){

                if(i == 0){

                    str +=  parseInt($(this).val());    //需要将获取到的字符串值转为整数，下同

                }else{

                    str += ',' + parseInt($(this).val());

                }

            });

            alert(str);//这里是获取到的数据，连接成','隔开的字符串是为了方便数据库使用'in'关键字。

        }

    });

</script>

</body>

</html>

jquery实现checkbox全选和全部取消，以及获取值的更多相关文章

  1. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  2. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

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

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  5. Jquery 组 checkbox全选checkbox

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. Jquery实现checkbox全选、取消全选和反选

    最近在看廖雪峰的Jquery教程,事件篇的练习题比较综合,研究了很久终于研究出来了,现在分享出来,提供给小白学习.题目如下: 首先要获取到全选checkbox和每一项的checkbox,然后通过逻辑代 ...

  7. jQuery checkbox全选 和全部取消

    1.chkAll选中,全部chk选中  ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...

  8. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  9. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

随机推荐

  1. Query Designer：Variable 变量

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. php : 基础(3)

    运算符 算术运算符 基础: 符号有:+   -   *   /   % 说明: 他们都是针对数字进行的运算: 如果他们的两边有不是数字的数据,就会(自动)转换为数字: 其中取余运算(取模运算)%,它只 ...

  3. An entity object cannot be referenced by multiple instances of IEntityChangeTracker.

    如果你和我一样遇到了这个问题,那么你就要检查你要操作的Model对象查询,更新操作的数据库上下文也就是DBContext是否一致.如果不一致也就是说你用AContext去查如AContext.SET& ...

  4. Chrome谷歌浏览器下不支持css字体小于12px的解决办法

    先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...

  5. windows PHONE 开发-入门程序构筑

    1:页面的扩展名为:.xaml文件类似于ASPX一样可以编写客户端显示内容和后台处理内容 一般的前台页面的形式为: <Page x:Class="MyFirstApp.MainPage ...

  6. java利用Scanner获取键盘输入

    首发地址:我的网易博客 在运行一个java程序的时候,可能我们需要在运行的时候传递一些参数进去...咋办呢... java提供了一个Scanner类,利用这个类,我们可以很方便的获取键盘输入的参数.. ...

  7. viewPager 的可滑动 Title

    有三种方式: 1. 系统提供的title 缺点:标题在viewpager的滑动过程中也会滑动 实现:在ViewPager布局中添加 PagerTabStrip 或者是 PagerTitleStrip ...

  8. linux指令（一）文件的操作

    ls -i 查看文件的inode号 find ./ inum 1651190 -exec rm  -i {} \; 根据inode号删除文件

  9. 编写我的第一个CGI代码——python学习

    在编程学习网站学习Python语言,学习到cgi编程章节遇到了一些小问题,课程介绍的为linux环境的Apache配置方法,具体如下: [linux环境配置方法:] 在进行CGI编程前,确保您的Web ...

  10. 如何在本地电脑安装phpmyadmin及访问地址

    因为要安装wordpress,上网查了下安装wordpress前要安装phpmyadmin,前提是要在自己本地电脑上安装APMSeverx虚拟主机才可以,在本地访问phpmyadmin页面.下面的步骤 ...