如果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的内容发生了变化，而不仅仅是某些类型文本（比较原始文本和较新的文本）。