`
Phyllis-Cheng
  • 浏览: 2382 次
  • 性别: Icon_minigender_2
最近访客 更多访客>>
社区版块
存档分类
最新评论

Jquery点击行(tr)选中checkbox,实现全选反选删除

阅读更多

点击行时效果代码:

$("tr").live("click", function () {

     if ($(this).hasClass("bgRed")) {

         $(this).removeClass("bgRed").find(":checkbox").attr("checked", false);

     } else {

                $(this).addClass("bgRed").find(":checkbox").attr("checked", true);

            }

 });

 

反选按钮时的效果代码:

$("#btnReverse").click(function () {

                //遍历.column 下的 checkbox;

                $(".column :checkbox").each(function () {

                    //给当前勾选的checkbox取反;  其中!$(this).attr("checked")是先获取他的属性,再取反,充当第二个参数;

                    //attr方法只有一个参数时是取值,两个参数时是设值;

                    $(this).attr("checked", !$(this).attr("checked"));

                    $.GetCheck($(this));  //调用自定义的函数.

                });

            });

 

自定义的函数代码:

//注意,它的位置是和$(function(){ })平级的.

 jQuery.extend({

            GetCheck: function (status) {

                $(status).attr("checked") ? $(status).parent().parent().addClass("bgRed") :       $(status).parent().parent().removeClass("bgRed");

            }

        });

如果 $(status).attr("checked") =true; 就给行添加样式 addClass("bgRed"); 如果$(status).attr("checked")=false;就把样式移除;

 

分享到:
评论

相关推荐

    JQuery选中checkbox方法代码实例(全选、反选、全不选)

    1、checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <... ...head runat="server">...

    jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    jQuery实现checkbox(复选框)选中、全选/反选代码: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><...

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...

    jQuery实现点击行选中或取消CheckBox的方法

    本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法。分享给大家供大家参考,具体如下: /// /// 点击行选中或者取消CheckBox /// /// 表ID function SetCheckBox_Check(TableID) { var $TableID = Table...

    jquery实现简单的全选和反选功能

    首先我们看个简单的实例 <!DOCTYPE ...jQuery实现CheckBox全选、全不选</title> <script src=http://code.jquery.com/jquery-1.4.4.min.js type

    ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”s

    jQuery实现简单全选框

    本文实例为大家分享了jQuery实现简单全选框的具体代码,供大家参考,具体内容如下 1.要求: (1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中 (2)当复选框有取消选中时,全选框...

    基于JQuery实现CheckBox全选全不选

    所以我就参照网上的例子试着自己写了一个,达到了自己想要的效果,其实这也是一个很...DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

    jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码 最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,...

    JQuery复选框全选效果如何实现

    Js相关技术 checked属性 如何获取所有复选框:document....第二种方法:使用层级选择器来实现 tbody > tr > td > input $(“tbody > tr > td > input”).prop(“checked”,this.checked); 第三种方法: /

    基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

    建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 《————HTML————》 //thinkphp循环显示把data里fid赋予多选框 <tr> <td><input type=checkbox value={$vo.fid}/></td>//可在后面加td输入...

    jQuery+Datatables实现表格批量删除功能【推荐】

    1:点击全选的选择框CheckBox,选中以下列表中所有的选择框 2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框 3:单选某个选择框 如图所示: http://recordit.co/GLj5a5BWo9 简单代码demo: <tr ...

    bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

    最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现。 效果是这样: 因为是内部用,样式也不要求太好看,直接上代码。 示例代码: <!DOCTYPE ...

    jQuery中checkbox反复调用attr(‘checked’, true/false)只有第一次生效的解决方法

    本文实例讲述了jQuery中checkbox反复调用attr(‘checked’, true/false)只有第一次生效的解决方法。分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $(input[name=ids])...

    jquery操作checkbox示例分享

    checkbox操作 1. 全选、全不选 2.打印所有的选中项目 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> ...

    html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这文,非常详细,如果大家需要做前面所说的功能,可以参考这个地址,http://mrthink.net/jquery-plugin-iselecttags/...

    jQuery 实现批量提交表格多行数据的方法

    批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了。 先上一部分代码(这是表头以及一个全选按钮)...

    jquery attr方法获取input的checked属性问题

    问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,...

    jQuery中attr()和prop()在修改checked属性时的区别

    在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr(‘checked’,true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题。 百度了很久找到原因是HTML的属性分为...

Global site tag (gtag.js) - Google Analytics