jQuery根据第一次输入的值填充数组命名的表单域，其中字段数量未知 [英] jQuery to populate array-named form fields based on first entered value where number of fields is unknown

问题描述

问候，

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

 < form> 
< label for =same>与第一个相同< / label> 
< input id =samename =sametype =checkbox/> 
< input type =textid =foo [1]name =foo [1]value =/> 
< input type =textid =foo [2]name =foo [2]value =/> 
< input type =textid =foo [3]name =foo [3]value =/> 
< input type =textid =foo [4]name =foo [4]value =/> 
< input type =textid =foo [5]name =foo [5]value =/> 
< / form> 
  

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

可以有任意数量的#foo输入，基于表单前一阶段的输入，这一点给我带来麻烦。我确定我错过了一些显而易见的东西，但我无法在 $（'＃dest'）。val（$（'＃source'）。val（））; / code>开始工作。

帮助！

解决方案

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（''）; 
} 
}）; 
  

虽然这可行，但可能更容易添加诸如第一和<$ c $

 < input id = samename =sametype =checkbo x/> 
< input type =textid =foo [1]name =foo [1]class =firstvalue =/> 
< input type =textid =foo [2]name =foo [2]class =restvalue =/> 
< input type =textid =foo [3]name =foo [3]class =restvalue =/> 
< input type =textid =foo [4]name =foo [4]class =restvalue =/> 
< input type =textid =foo [5]name =foo [5]class =restvalue =/> 
  

jQuery代码然后简化为：

<$ （$（this）.is（'：checked'））{
$（$（$））$（$＃$） '。''）。val（$（'。first'）。val（））;
}
else {
$（'。rest'）。val（''）;
}
}）;


Greetings,

I have a form with a variable number of inputs, a simplified version of which looks like this:

<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>

The idea is to tick the #same checkbox and have jQuery copy the value from #foo[1] into #foo[2], #foo[3], etc. They also need to clear if #same is unchecked.

There can be any number of #foo inputs, based upon input from a previous stage of the form, and this bit is giving me trouble. I'm sure I'm missing something obvious, but I can't get any variation on $('#dest').val($('#source').val()); to work.

Help!

解决方案

jQuery will fail to select by id $('#foo[1]') since it includes [ and ], so I'm selecting the first element as $('[id=foo[1]]'). Then getting all next text boxes, then filtering them out if their id attribute does not match foo[<digits>], and then either applying the same value as the first one, or clearing them depending on the checkbox state.

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('');
    }   
});​

Although this works, it might just be easier to add classes such as first and rest to the HTML which would make things a lot easier.

<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="" />

The jQuery code then simplifies to:

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

这篇关于jQuery根据第一次输入的值填充数组命名的表单域，其中字段数量未知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！