表格中有复选框的情形

<table class="table table-hover table-condensed table-bordered">

                <thead>
                    <tr>
                        <th><input type="checkbox"/></th>
                        <th>编号</th>
                        <th>产品</th>
                        <th>上线时间</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox"/>
                        </td>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            01/04/2012
                        </td>
                        <td>
                            Default
                        </td>
                    </tr>          
                </tbody>

            </table>

表格每一行都是类似的，所以在这里就直接省略了多行。。css样式中比较重要的是.selected{background-color:#EAF2FF;}以便在之下的js文件中通过addClass和removeClass来添加行的背景色样式

希望点击标头的行可以全选，点击任意一行就可以颜色改变，并且复选框也是选中。

js代码

//选中行就触发复选框的点击事件
$("tbody").on("click","td",function () {
if(window.event.srcElement.nodeName=="INPUT")return;
    var input=$("input:eq(0)",this.parentNode)
    input.prop("checked",!input.prop("checked"));   
    $(this).parents("tr").addClass("selected");

});

// 全选
$("thead input[type='checkbox']").click(function(){
//    $("tbody td")[$(this).prop("checked")?"removeClass":"addClass"]("selected").find("input[type='checkbox']").click();
//在这里用了一句话来绑定每个人复选框但是好像有bug
    

    if($(this).prop("checked")==true){
        $("input[type='checkbox']").prop("checked",true);
        $("tr").addClass("selected");
    }
    else
    {
        $("input[type='checkbox']").prop("checked",false);
        $("tr").removeClass("selected");
        
    }

});


//单选
$("td>input[type='checkbox']").click(function(){
if($(this).prop("checked")==false){
        $(this).prop("checked",false)
        $(this).parents("tr").removeClass("selected");
    }
   
    else{
        $(this).prop("checked",true);
        $(this).parents("tr").addClass("selected");
        
    }
});