目的

實現滑鼠點選表格行元素，就可以選中所在行內的複選框，實現資料勾選效果。多用於管理系統中資料列表上。

效果

錄製了一個簡單的動畫來呈現。

方法

這裡採用jQuery框架做實現，當然原生的js也可以實現，只是麻煩一些。

$(function () {
    //除了表頭（第一行）以外所有的行新增click事件.
    $("tr").slice(1).click(function () {
        // 切換樣式
        $(this).toggleClass("tr_active");
        // 找到checkbox物件
        var chks = $("input[type='checkbox']"
 
,this);
        var tag = $(this).attr("tag");
        if(tag=="selected"){
            // 之前已選中，設定為未選中
            $(this).attr("tag","");
            chks.prop("checked",false);
        }else{
            // 之前未選中，設定為選中
            $(this).attr("tag","selected");
            chks.prop("checked",true);
        }
    });
});
 

說明

程式碼比較簡單，主要用到jQuery中的幾個方法：

1. slice(1)將第一行tr（一般為表頭）去除繫結事件，通常表頭的checkbox是用來做全選的。
2. toggleClass為tr註冊或反註冊樣式tr_active，tr_active是自己定義的，可根據需要修改，一般配合著是修改背景色為深色，標識為選中狀態。
3. 選擇器$(“input[type=’checkbox’]”,this)在當前tr中查出checkbox。
4. $(this).attr(“tag”)在tr中查詢自定義標籤tag。
5. chks.prop(“checked”,true)修改checkbox選中狀態。