點擊表格行選擇複選框使用jQuery

65

爲了選擇表格中一行的複選框，我們將首先檢查我們要定位的元素的typeattribute是否不是checkbox，如果它不是checbox，那麼我們將檢查嵌套在該表格行內的所有複選框。

$(document).ready(function() { 
    $('.record_table tr').click(function(event) { 
    if (event.target.type !== 'checkbox') { 
     $(':checkbox', this).trigger('click'); 
    } 
    }); 
});

Demo

如果你想突出顯示checkboxchecked錶行比我們可以使用一個if條件與is(":checked")，如果是比我們發現使用.closest()，比我們最接近的tr元素使用addClass()

$("input[type='checkbox']").change(function (e) { 
    if ($(this).is(":checked")) { //If the checkbox is checked 
     $(this).closest('tr').addClass("highlight_row"); 
     //Add class on checkbox checked 
    } else { 
     $(this).closest('tr').removeClass("highlight_row"); 
     //Remove class on checkbox uncheck 
    } 
});

Demo

來源

2013-08-18 07:46:01

+0

優秀的解決方案，但有一個輕微的問題（次要），複選框是在標籤標籤（爲CSS目的），你知道任何jQuery的解決方法？最後的手段是隻刪除標籤標籤，並將它們全部切換到「span class =」label「或其他東西並更新css。謝謝你是否得到這個或不:) :) – Onimusha

+0

非常棒..你的解決方案節省了很多時間 –

+0

GG。好的一段腳本。謝謝@Mr。外星人！ – PipBoy2000

7

這個問題對我很有用，但是我對以前的解決方案有問題。如果您單擊表格單元格中的鏈接，它將觸發複選框切換。我GOOGLE了這一點，我看到了一個命題放在桌子上的鏈接添加event.stopPropagation()，像這樣：

$('.record_table tr a').click(function(event) { 
    event.stopPropagation(); 
});

該解決方案是一個壞主意，因爲我有表的鏈接上一些jQuery的引導酥料餅。 ..

因此，這裏是一個更適合我的解決方案。順便說一句，因爲我使用引導2.3，該行的亮點是通過向tr添加「info」類來完成的。要使用此代碼，您只需將class="selectable"添加到表格標籤。

$(".selectable tbody tr input[type=checkbox]").change(function(e){ 
    if (e.target.checked) 
    $(this).closest("tr").addClass("info"); 
    else 
    $(this).closest("tr").removeClass("info"); 
}); 

$(".selectable tbody tr").click(function(e){ 
    if (e.target.type != 'checkbox' && e.target.tagName != 'A'){ 
    var cb = $(this).find("input[type=checkbox]"); 
    cb.trigger('click'); 
    } 
});

你可能會想更具體與測試條件，爲例，如果你有行中的其他投入。

來源

2014-01-19 21:17:18

0

你可能只是觸發這個click事件... :)

$(document).ready(function() 
    { 
     $("table tr th :checkbox").click(function(event) 
     { 
     $('tbody :checkbox').trigger('click'); 
     }); 
    });

OR

$(document).ready(function() 
    { 
     $("table tr th :checkbox").on('click',function(event) 
     { 
     $('tbody :checkbox').trigger('click'); 
     }); 
    });

來源

2016-01-12 11:32:22

2

觸發像許多上面提供的解決方案的點擊將導致運行兩次的功能。更新道具值來代替：

$('tr').click(function(event){ 
    alert('function runs twice'); 
    if(event.target.type !== 'checkbox'){ 
    //$(':checkbox', this).trigger('click'); 
    // Change property instead 
    $(':checkbox', this).prop('checked', true); 
    } 
});

Link to jsfiddle example here

來源

2016-08-01 18:58:28

+0

爲什麼函數運行兩次？ – Gagantous

+0

@Gagantous - 很好的問題。當一個事件發生在一個元素上時，它首先在它上面運行處理程序，然後在它的父項上運行，等等。在此實現中，當直接單擊輸入複選框時（您會注意到我的jsfiddle exp），該函數不會運行兩次，但標準UI設計接受列或行上的事件（如單擊）以設置元素的屬性（如值或樣式）。所以觸發器以這種方式點擊實現會導致函數運行兩次 - 請參見傳播。發生了什麼好視覺代表：https://javascript.info/bubbling-and-pturing –

+1

真的很好的解釋，謝謝先生（y） – Gagantous

0

即使接受@Mr。外星人的答案效果很好，如果你決定在某些時候用jQuery動態地添加一個新的<tr>行，那麼這種方法無效。

我建議使用事件委託方式，這只是對接受答案的輕微修改。

相反的：

... $('.record_table tr').click(function(event) { ...

使用

... $('.record_table').on('click', 'tr', function(event) { ...

與同爲高亮，使用：

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

更多的信息在這裏：Click event doesn't fire for table rows added dynamically

來源

2016-09-13 20:44:48 WojtylaCz

點擊表格行選擇複選框使用jQuery

回答

相關問題