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

    约束 注释 你可以给你的 SQL 语句添加注释来增加可读性和可维护性. SQL 语句中注释的分隔如下: l  双连字符“--”.所有在双连字符之后直到行尾的内容都被 SQL 解析器认为是注释. l  ...

  2. 百度-official

    1.请描述html5新增的一些标签,描述这些标签的用法和语义 2.css属性position的属性值有哪些,描述它们的作用 3.常见的浏览器端的存储技术有哪些,以及它们的优缺点 4.程序定义如下: v ...

  3. 说说focus /focusin /focusout /blur 事件

    事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...

  4. Linux json解析jq

    jq是一个linux下很方便的json解析器,平时看json文件都是一行混在一起的,非常不适合阅读. https://stedolan.github.io/jq/download/ 直接到官网上下载, ...

  5. Deep Learning 22：总结一些deep learning的基本知识

    1.交叉熵代价函数 2.正则化方法:L1和L2 regularization.数据集扩增.dropout 3. 数据预处理 4.机器学习算法中如何选取超参数:学习速率.正则项系数.minibatch ...

  6. iOS使用Security.framework进行RSA 加密解密签名和验证签名

    iOS 上 Security.framework为我们提供了安全方面相关的api: Security框架提供的RSA在iOS上使用的一些小结 支持的RSA keySize 大小有:512,768,10 ...

  7. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. python——线程与多线程基础

    我们之前已经初步了解了进程.线程与协程的概念,现在就来看看python的线程.下面说的都是一个进程里的故事了,暂时忘记进程和协程,先来看一个进程中的线程和多线程.这篇博客将要讲一些单线程与多线程的基础 ...

  9. css学习笔记 8

    标准盒模型:盒子宽 = marginleft+borderleft+paddingleft+width+paddingright+borderright+marginright; 盒子高=margin ...

  10. php 使用curl模拟登录人人(校内)网

    $login_url = 'http://passport.renren.com/PLogin.do'; $post_fields['email'] = 'XXXX';$post_fields['pa ...