0

我有一个大表格，表格中有数百个输入和文本区域。代码是这样的（用确切的结构更新）：

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

仅当在 textarea 中键入的文本更改了其原始文本（而不仅仅是键入了一些文本）时，才启用该复选框可能会很好。

非常感谢。

4

4 回答 4

0

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

$.each( $("textarea[name='tx[]']"), function( key, value ) {
    alert( key + ": " + value );
});
于 2013-10-28T17:55:08.543 回答
0

我使用测试/错误找到了这个工作代码：

$("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);
    }
})

值得赞赏的改进：

- 仅当文本区域的内容发生更改时才启用复选框，而不仅仅是键入一些文本（将原始文本与较新的文本进行比较）。

于 2013-10-29T12:34:21.240 回答
0

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

$('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)，并找到复选框。我无法根据涉及名称的选择器使其工作（无论如何，这非常低效，你应该避免像瘟疫一样的属性选择器），所以我只给出了适当的项目类。这是一个更干净的选择器。

这是更新的 jsFiddle。

于 2013-10-28T17:58:15.783 回答
0

尝试这个

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

只要复选框是文本区域的前一个元素（就像现在一样），这将起作用。

于 2013-10-28T17:58:15.760 回答