zoukankan      html  css  js  c++  java
  • JQuery点击行(tr)实现checkBox选中,反选时移除和添加样式.

    第一版链接:http://www.cnblogs.com/zhuiyi/archive/2011/06/29/2092836.html

    很开心大家能和我这个“菜鸟”一起互动,也感谢大家和我一起思考,看了大家的代码也有了不少启发,看了jifsu兄的代码,自己也试测了一下,确实比我自己写的那种方式简单的多,代码的可读性也大大增强不少,在这个基础上,我又添加了一个全选和反选时的效果。

    用到了三元运算符,和一个自定义的函数。

    点击行时效果代码:

     $("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;就把样式移除;

  • 相关阅读:
    20165214 第八周学习任务
    20165214 实验二 Java面向对象程序设计
    20165214 结队编程项目-四则运算
    20165214 第七周学习任务
    20165214 第六周学习任务
    20165214 实验一 Java开发环境的熟悉
    20165313 《Java程序设计》第八周学习总结
    结对编程-四则运算
    2017-2018-2 20165313实验二《Java面向对象程序设计》
    20165313 《Java程序设计》第七周学习总结
  • 原文地址:https://www.cnblogs.com/zhuiyi/p/2093642.html
Copyright © 2011-2022 走看看