如果textarea中的文本更改，請啓用複選框

Question

我在表格中有一個包含數百個輸入和textareas的大表單。該代碼是這樣的（與精確結構更新）：

<form> 
<table> 
<tr> 
<td><input name="cx[]" value="a" type="checkbox"></td> 
<td>...</td> 
<td>...</td> 
<td>...</td>  
<td>...</td> 
<td>...</td> 
<td>...</td> 
<td>...</td> 
<td><textarea name="tx1[]">...</textarea></td> 
<td><textarea name="tx2[]">...</textarea></td> 
<td><textarea name="tx3[]">...</textarea></td> 
<td></td> 
</tr> 
... 
... 
</table> 
</form> 

當用戶改變一個textarea值，我想自動激活該行（相同的數組索引）asociated的複選框。這是因爲當用戶提交表單時，我需要知道（使用複選框）哪些元素已更改，以便存儲/更新它們，而不是填充所有textarea。

只有在textarea中輸入的文本已經改變了它的原始文本（不只是輸入了一些文本）時，啓用複選框可能會很棒。

非常感謝。

Answer 1

你不需要知道索引值，只要你的結構提供的是一致的。

$('textarea').on('keyup',function(){ 
    if(this.value.length > 0){ 
     $(this).prev().prop('checked',true); 
    } else { 
     $(this).prev().prop('checked',false); 
    } 
}); 

您可以優化這是必要的，但只要複選框要激活preceeds是被改變的文本框的值，你可以只使用.prev()脫身。

編輯

因此，它看起來像你有每行一個複選框名稱爲cx[]要檢查是否有任何文本框的值從原來的值更改？怎麼樣是這樣的：

$('textarea').on({ 
    focus:function(){ 
     $(this).data('curval',this.value); 
    }, 
    'blur keyup':function(){ 
     if(this.value !== $(this).data('curval')){ 
      $(this).prevAll('input[type="checkbox"]').prop('checked',true); 
     } 
    } 
}); 

的focus功能將存儲textarea的現有價值，當它被聚焦，然後比較值時，它要麼是模糊或keyupped（模糊是萬一有人複製/粘貼通過鼠標）。如果它已經改變，那麼它通過同一級別的DOM樹循環，直到它到達複選框並檢查它。

缺少「取消選中它」是因爲它的實現變得無限複雜......即使你「改回它」，它也會改變以前的值，因此會發生變化。另一個需要注意的是，我根據假設它是唯一的複選框做了選擇器...如果您有其他人，您可以根據名稱選擇一個選擇器，如.prevAll('[name="cx[]"]')。

希望這是你要找的。

EDIT 2

原來我簡單化... .prevAll()將不起作用，因爲你需要檢查的家長，然後以前的孩子。我把它改爲：

$(".tx").on({ 
    focus:function(){ 
     $(this).data('curval',this.value); 
    }, 
    'blur keyup':function(){ 
     if(this.value !== $(this).data('curval')){ 
      var val = this.value; 
      $(this).data('curval',val).parents('tr').find('.cx').prop('checked',true); 
     } 
    } 
}); 

這是有效的。它將新值分配給curval，然後搜索該行的父級（tr），並找到該複選框。我無法根據涉及名稱的選擇器（無論如何，這是非常低效的，你應該避免像鼠疫這樣的屬性選擇器）工作，所以我只給了適當的項目類。這是一個更乾淨的選擇器。

Here is the updated jsFiddle.

Answer 2

我也不知道如何在這種情況下，指數，但也許這可以幫助你：

$.each($("textarea[name='tx[]']"), function(key, value) { 
    alert(key + ": " + value); 
}); 

Answer 3

試試這個

.... 
if (this.value.length > 0) { 
    $(this).prev('input').prop('checked',true) 
} else { 
    $(this).prev('input').prop('checked',false) 
} 

這將只要複選框textarea的前一個元素的工作（因爲它是現在）。

Answer 4

我發現使用測試/錯誤此工作代碼：

$("textarea[name='tx1[]']").keyup(function(){ 
    //inArray: Search for a specified value within an array and return its index (or -1 if not found). 
    var index = jQuery.inArray(this,$("textarea[name='tx1[]']")); 
    if(this.value.length > 0){ 
     $("input[name='cx[]']").eq(index).prop('checked',true); 
    } 
}) 

改進將被apreciated：

-Enable複選框只有textarea的內容發生了變化，而不僅僅是某些類型文本（比較原始文本和較新的文本）。