點擊表格'檢查'復選框中的行？

Question

我希望這是正確的領域，因為它比其他任何東西更具理論性。 我目前正在處理一個頁面，用戶可以通過單擊最左側列中的復選框並單擊“ Edit按鈕來選擇要編輯的一行或多行。 我還沒有決定是否要嘗試編程這個功能，但是可以有效地隱藏復選框並使用某種javascript或jquery來點擊表中的一行相當於檢查相應行的復選框嗎？ 我剛剛開始使用javascript和jquery，我對這有多強大感到困惑。 如果可以使用這種類型的功能，請通知我，如果是這樣，實現這種行為的一般方法是什么？

Answer 1

是的，這是完全可以實現的，盡管如果有人在瀏覽器中禁用了JavaScript，您可能會考慮可訪問性含義。

您可以采取多種方法。 舉例來說，您可以使用類似以下（未經測試）的click處理程序：

$(document).on('click', '#yourtable tr', function(evt) {
    $(this).toggleClass('selected');
});

這將給你的表中的每個tr （id為#yourtable ） selected的類，然后你可以通過CSS設置樣式和/或通過另一個jQuery讀回。

在事件處理程序中，您還可以執行其他操作來記錄選擇，例如更新隱藏的輸入字段，直接發回服務器或檢查現有復選框（如果您願意，可以選擇隱藏）。

Answer 2

可行的。 這是如何做：

jsbin鏈接

HTML

<table border=1>
    <tr><td><input type="checkbox"></td><td>Something 1</td><td>Something else 1</td></tr>
    <tr><td><input type="checkbox"></td><td>Something 2</td><td>Something else 2</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 3</td><td>Something else 3</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 4</td><td>Something else 4</td></tr>
</table>

jQuery的

$('input[type=checkbox]').parent('td').hide(); // If JS disabled, checkboxes are still visible

$('table tr').click( function() {
    var $chk = $(this).find('input[type=checkbox]');
    $chk.prop('checked',!$chk.prop('checked'));
    $(this).toggleClass('selected'); // To show something happened
});

CSS

tr.selected{
   background-color:#ccc;
}

Answer 3

以下是所請求功能的簡單實現 ：

$(document).ready(function() {
    $('tr').click(function(e) {
        var $checkbox = $(this).find('input');
        var isChecked = $checkbox.prop('checked');

        if (isChecked) {
            $checkbox.removeProp('checked');
        }
        else {
            $checkbox.prop('checked', 'checked');
        }
    });
});​