【问题标题】：Populate textboxes via a series of checkboxes通过一系列复选框填充文本框
【发布时间】：2013-10-15 15:04:01
【问题描述】：

我正在尝试从多个复选框中填充一系列文本框。有 8 个文本框，似乎代码只会填充其中一个字段。

这里是复选框：

<input name="naicscode" id="naicsCodeCheckbox0" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox1" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox2" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox3" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox4" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input name="naicscode" id="naicsCodeCheckbox5" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox6" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox7" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input type="button" id="secondaryNaicsButton" name="save_value" value="Save" />

这里是文本框：

<input name="secondaryNaicsCodeField" id="secondaryNaicsCode0" class="fpp_textfield NAICS-code-field" value=""  type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode1" class="fpp_textfield NAICS-code-field" value=""  type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode2" class="fpp_textfield NAICS-code-field" value=""  type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode3" class="fpp_textfield NAICS-code-field" value=""  type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode4" class="fpp_textfield NAICS-code-field" value=""  type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode5" class="fpp_textfield NAICS-code-field" value=""  type="text" />

这是我的 jQuery：

 // gets values of check box in Secondary NAICS list
 $('#secondaryNaicsButton').click(function() {
   $('.naicsCodeCheckbox:checked').each(function(i){
   var val = [] 
   val[i] = $(this).val();
   for (var i =0; i < val.length; i++) {
     $('#secondaryNaicsCode'+i).val(val[i]);
   }
 });

我得到的结果是它将给出其中一个复选框的值并将其放在文本框 3 或 4 中。

这是控制台日志给我的：

111140                        fol_reg_form.js:215
undefined                     fol_reg_form.js:215
111150                        fol_reg_form.js:215
2
undefined                     fol_reg_form.js:215
111219                        fol_reg_form.js:215
3
undefined                     fol_reg_form.js:215
111331                        fol_reg_form.js:215
4
undefined                     fol_reg_form.js:215
111334

【问题讨论】：

正如@Sergio 提到的你有错误的选择器，它应该是'.naicsCodeCheckbox'而不是'.naicscode'，另一件事是你只选择了已选中的复选框和'i'是该数组的索引，而不是完整的（选中和未选中），因此您需要选中所有复选框，然后检查是否已选中

标签： javascript jquery arrays checkbox

【解决方案1】：

试试这个：

$('#secondaryNaicsButton').click(function () {
    $('.naicsCodeCheckbox').each(function (i) {
        if (this.checked) {
            $('#secondaryNaicsCode' + i).val(this.value);
        }
    });
});

演示here

注意：在您的代码中，您没有名称为 .naicscode 的类，因此我使用了 naicsCodeCheckbox 类。如果您想使用名称，您可以使用相同的代码，但使用 $('input[name="naicscode"]').each( //etc ... 代替。

【讨论】：

我尝试了建议的代码。文本框中没有输入任何值。 $('#secondaryNaicsCode' + i) i 现在没有价值了，对吗？所以它不会填充正确的文本框 - 想法？
@TonyLombardi，我仍然在我的代码中使用i，你的使用方式实际上是错误的，因为你的选择器只得到了已经检查过的输入并制作了一个数组，那么那个索引就会与文本框索引不匹配。
确实很抱歉，我刚刚检查过了。让我来实现它，看看它会带我去哪里。

【解决方案2】：

我得到了工作的代码。接受了一些好的建议。

代码如下：

// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
  $('.naicsCodeCheckbox:checked').each(function(e) {
    val = []
    val[e] = $(this).val();
    $('#secondaryNaicsCode'+e).val(val[e]);   
  }); 
});

演示here

【讨论】：