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();
    }
}

猜你喜欢

转载自blog.csdn.net/lzh6hao0/article/details/86482320