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值时，我想自动激活该行中相关的复选框（相同的数组索引）。这是因为当用户提交表单时，我需要知道（带有复选框）哪些元素已更改，是否存储/更新它们，而不是填充所有textareas。

如果在textarea中键入的文本更改了原始文本（而不仅仅是键入了某些文本），则启用该复选框可能会很棒。

非常感谢。

Answer 1

在这种情况下我也不知道如何获取索引，但也许这可以帮助你：

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

Answer 2

只要您提供的结构一致，您就不需要知道索引值。

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

您可以根据需要对其进行优化，但只要您要激活的复选框优先于更改文本框值的复选框，您就可以使用.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的现有值，然后比较模糊或按键时的值（模糊以防有人通过鼠标复制/粘贴）。如果它已经改变，那么它会循环回到同一级别的DOM树，直到它到达复选框并检查它。

缺乏“取消选中”是因为实现起来会变得无比复杂......即使你“改回来”，它也会改变前一个值，因此会发生变化。另一个注意事项是我根据假设它选择了唯一的复选框...如果你有其他选项卡，你会选择一个基于名称的选择器，如.prevAll('[name="cx[]"]')。

希望这就是你要找的东西。

编辑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 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);
    }
})

可能会有所改善的改进：

- 仅当textarea的内容发生变化时才启用该复选框，而不仅仅输入一些文本（将原始文本与较新的文本进行比较）。

如果文本在textarea中更改，则启用复选框

4 个答案: