Question

问候，

我有一个包含可变数量输入的表单，其简化版本如下所示：

<form>
<label for="same">all the same as first?</label>
<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>

我们的想法是勾选#same复选框并让jQuery将#foo [1]中的值复制到#foo [2]，＃foo [3]等等。他们还需要清除#same是否未选中。

根据表格前一阶段的输入，可以有任意数量的#foo输入，这个位给我带来了麻烦。我确定我遗漏了一些明显的东西，但我无法对$('#dest').val($('#source').val());进行任何修改。

帮助！

Answer 1

jQuery将无法按ID $('#foo[1]')进行选择，因为它包含[和]，所以我选择的第一个元素为$('[id=foo[1]]')。然后获取所有下一个文本框，如果其id属性与foo[<digits>]不匹配，则将其过滤掉，然后应用与第一个相同的值，或者根据复选框状态清除它们。

example

$("#same").click(function() {
    var first = $('[id=foo[1]]');
    var next = first.nextAll(':text').filter(function() {
        return /foo\[\d+\]/.test(this.id);
    });
    if($(this).is(':checked')) {
        next.val(first.val());
    }
    else {
        next.val('');
    }   
});

虽然这样可行，但可以更轻松地将诸如first和rest之类的类添加到HTML中，这样可以使事情变得更加容易。

<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" class="first" value="" />
<input type="text" id="foo[2]" name="foo[2]" class="rest" value="" />
<input type="text" id="foo[3]" name="foo[3]" class="rest" value="" />
<input type="text" id="foo[4]" name="foo[4]" class="rest" value="" />
<input type="text" id="foo[5]" name="foo[5]" class="rest" value="" />

然后jQuery代码简化为：

$("#same").click(function() {
    if($(this).is(':checked')) {
        $('.rest').val($('.first').val());
    }
    else {
        $('.rest').val('');
    }   
});

Answer 2

    $("input#same").click(function(){
      var checkBox = $(this);
       if (checkBox.attr("checked")){
         $("form input[name^=foo]").val($("input[name^=foo]:first").val());
        }else{
          $("form input[name^=foo]:not(:first)").val("");
        }
    });

编辑：此代码仅适用于名称以字符串foo开头的输入元素 Example

Answer 3

也许是这样的？

http://jsbin.com/anone3/2/edit

jQuery根据第一个输入的值填充数组命名的表单字段，其中字段数未知

3 个答案: