切換上覆選框的一大亮點點擊

Question

爲下表：

<table id="a_grid"> 
    <tr id="a_row"> 
    <td>Choice A<input type="checkbox" id="a_box" class="box"></td> 
    <td>Reason:<input type="text" id="a_text" class="reason"></td> 
    </tr> 
    <tr id="b_row"> 
    <td>Choice B<input type="checkbox" id="b_box" class="box"></td> 
    <td>Reason:<input type="text" id="b_text" class="reason"></td> 
    </tr> 
</table> 

我試圖使其工作，這樣當你點擊複選框，切換爲一種「控制」類，其對應的文本框中有一個特定的顏色。嘗試按類別進行識別，以便我可以縮放表格。

我已經試過：

$(".box").change(function() { 
    $(".reason").toggleClass("control", false); 
}); 

Answer 1

• 你目前定位所有複選框與.reason，而你需要使用自帶的事件，即上下文複選框本身。從那裏你可以遍歷行，然後到輸入。
• .toggleClass()將永遠刪除該類，因爲您通過false作爲第二個參數。然後，您可以切換基於複選框類，使用.checked屬性：

$('.box').change(function(){ 
    var $this = $(this); 
    $this.closest('tr').find('.reason') 
     .toggleClass('control', $this.prop('checked')); 
}); 

JSFiddle