在后台管理中经常会遇到列表全选和取消的功能，如评论审核、申请等，用到的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. Kerberos是怎么工作的？

    Kerberos是一种计算机网络授权协议,用来在非安全网络中,对个人通信以安全的手段进行身份认证. 采用客户端/服务器结构,并且能够进行相互认证,即客户端和服务器端均可对对方进行身份认证. 关键要素 ...

  2. caffe安装：ubuntu16.04 + opencv2.4 + python 2.7+ CUDA 8.0 RC + CuDNN 5.0

    官方教程:http://caffe.berkeleyvision.org/install_apt.html 主要参考教程: https://github.com/BVLC/caffe/wiki/Ubu ...

  3. Install Nvidia driver 367.18 or later

    Install Nvidia driver 367.18 or later from ppa:graphics-drivers/ppa as follows: sudo add-apt-reposit ...

  4. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  5. python走起之第十五话

    CSS Positioning(定位) 定位有时很棘手! 决定显示在前面的元素! 元素可以重叠! Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后 ...

  6. window 配置wnmp(转下整理 ，全)

    工具/原料   RunHiddenConsole.exe 下载地址:http://pan.baidu.com/share/link?shareid=100074&uk=822373947 方法 ...

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

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

  8. java归并排序，单线程vs多线程

    一.什么是归并排序 归并排序又称合并排序,它是成功应用分治技术的一个完美例子.对于一个需要排序的数组A[0..n-1],归并排序把它一分为二:A[0..n/2-1]和A[n/2..n-1],并对每个子 ...

  9. c++ is_space函数

    C库函数int isspace(int c)检查传递的字符是否是空白. 标准空白字符: ' ' (0x20) space (SPC) ' ' (0x09) horizontal tab (TAB) ' ...

  10. JOIN关联表中ON,WHERE后面跟条件的区别

    select * from td  left join (select case_id as sup_case_id , count(*) supervise_number from  td_kcdc ...