jquery实现table点击行来选中checkbox或者radio

在拼接好table之后,调用bindTr()方法绑定点击事件

//tr绑定点击事件
function bindTr() {
    //第一行为表头,所以不需要点击事件
    $("#TableId>tr:not(:first)").bind('click', function () {
        //获取第一列中的选择框,也可以使用"td:eq(0)"
        //input[name='choiceUser']也可以将name改为其它的属性,比如id,type等
        var thisObj = $(this).find("td:first-child>input[name='choiceUser']")
        //如果当前选择框为checkbox并且是选中状态,则取消选中状态
        if (thisObj.attr("type")=="checkbox" && thisObj.is(":checked")) {
            $(thisObj).prop("checked", false)
        }
        //如果当前状态为未选中,则将状态变为选中
        else {
            $(thisObj).prop("checked", true)
        }
        CheckedChange(thisObj)
    })
}

//單選框或者複選框改變時調用該方法,顯示選中數據
function CheckedChange(thisObj) {
    //防止事件冒泡,一定不能忘记,否则点击选择框本身的时候会出现问题,这个方法可能在ie中不兼容,所以需要修改一下
    //event.stopImmediatePropagation();
    //改成调用这个方法   
    stopPropagation(event)   
    //选择框的类型checkbox或者radio
    var type = $(thisObj).attr("type")    
    if (type == "radio") {
        radioClick(thisObj)
    }
    else if (type == "checkbox") {
        checkboxClick(thisObj)
    }    
}

//防止事件冒泡  
function stopPropagation(e){
    e=window.event||e;
    if(document.all){  //只有ie识别
        //cancelBubble 检测是否接受上层元素的事件的控制。
        //true 不被上层元素的事件控制。 
        //false 允许被上层元素的事件控制。这是默认值。
        e.cancelBubble=true;
    }else{
        e.stopImmediatePropagation();
    }
}

如果是.net中的gridview之类的方式,直接绑定数据生成table后,用这种方法不合适,请参考我的另一篇博客

https://blog.csdn.net/lzh6hao0/article/details/88741546

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值