jQuery將行爲添加到表中的匹配複選框

它目前已設置爲主行復選框同時點擊。這個表格還有每個主要行的子行，我需要將行爲添加到相同標籤同時點擊的子行。例如：當我檢查主要行A的第一個子行時，那麼主要行B的第一個子行也將被檢查。

我目前正在使用的表的構造方式與ID和類相同。

我在嘗試的內容摘要：點擊子行的複選框時，也會檢查下面相同的子行復選框。

是否將子行添加到數組，並以某種方式掃描它們以單擊複選框時識別匹配？有人能請我指出如何解決這個問題的正確方向嗎？謝謝。

$(document).ready(function() { 
    $("label:contains('PRIMARY ROW A')").closest('tr').attr('id', 'prime-row-a'); 
    $("label:contains('PRIMARY ROW B')").closest('tr').attr('id', 'prime-row-b'); 
    var primeRowA = $("label:contains('PRIMARY ROW A')").prev('input'); 
    var primeRowB = $("label:contains('PRIMARY ROW B')").prev('input'); 

    primeRowA.change(function(){ 
     primeRowB.attr('checked', $(this).is(':checked')); 
    }); 
    primeRowB.change(function(){ 
     primeRowA.attr('checked', $(this).is(':checked')); 
    }); 
}); 

<table width="550" border="0" cellspacing="0" cellpadding="5"> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span>PRIMARY ROW A</span></label></td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="01">01 - SUB ROW A</span></label></td> 
    </tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="02">02 - SUB ROW B</span></label></td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="03">03 - SUB ROW C</span></label></td> 
    </tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span>PRIMARY ROW B</span></label></td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="01">01 - SUB ROW A</span></label></td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="02">02 - SUB ROW B</span></label></td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    <label><span id="03">03 - SUB ROW C</span></label></td> 
</tr> 
</table>

來源

2012-11-16 mrtonyb

首先，標識應該是唯一的，所以你不應該給同一個ID多個元素。

可以在同一類分配給各組的複選框，當你點擊一個，相同類別

$(document).ready(function() { 
    $('input[type="checkbox"]').change(function() { 
     var cls = $(this).attr('class'); 
     $('.' + cls).attr('checked', $(this).is(':checked')); 
    }); 
});

http://jsfiddle.net/rdmond/PGLjg/

這實際上重新檢查設置的所有其他複選框的狀態您剛剛檢查過的框，但不難調整它只更改其他複選框與相同的類。

來源

2012-11-16 17:51:15

謝謝肖恩。我可以運行並解決我的問題。 – mrtonyb

使用唯一的名稱和ID的

第一件事 - U可以提供一個名稱的input場即例如 - 用於行1

<label for="row1">ROW 1</label> 
<input name = "row1" type = "checkbox" /> // row1 
<input name = "subrow1a" type = "checkbox" /> // sub row of row1 
// you can also use arrays of name i.e. like `name = subrow1[]`

爲2行

<label for="row2">ROW 2</label> 
<input name = "row2" type = "checkbox" /> // row 2 
<input name = "subrow2a" type = "checkbox" /> // sub row of row2

其次..你可以調用還會在檢查時調用Jquery/JavaScript函數，即onclick()以執行所需的操作。

來源

2012-11-16 17:51:44

jQuery將行爲添加到表中的匹配複選框

回答

相關問題