使用jQuery将第n个表单元素填充为数组的第n个值

Question

使用jQuery将第n个表单元素填充为数组的第n个值

3

我想知道如何使用jQuery填充第n个隐藏字段，该字段的值为我下面创建的数组的第n个值。我已成功创建了一个数组，将3个复选框选项（如果选中）分组到括号中。例如：[(A,B), (A,C), (A,B,C)...]。

现在，我需要获取数组中的第n个值，并将该值填充到第n个隐藏字段中。

    <input type="hidden" name="opt_0" id="opt_0" class="get_options">
    <input type="hidden" name="opt_1" id="opt_1" class="get_options">
    <table>
        <tbody>
            <tr class="registrant">
                <td><input type="text" id="OETIPC-NAME0" name="OETIPC-NAME0"></td>
                <td><input type="checkbox" name="OETIPC-A0" id="OETIPC-A0" class="reg_type" value="A"></td>
                <td><input type="checkbox" name="OETIPC-B0" id="OETIPC-B0" class="reg_type" value="B"></td>
                <td><input type="checkbox" name="OETIPC-C0" id="OETIPC-C0" class="reg_type" value="C"></td>
            </tr>
            <tr class="registrant">
                <td><input type="text" id="OETIPC-NAME1" name="OETIPC-NAME1"></td>
                <td><input type="checkbox" name="OETIPC-A1" id="OETIPC-A1" class="reg_type" value="A"></td>
                <td><input type="checkbox" name="OETIPC-B1" id="OETIPC-B1" class="reg_type" value="B"></td>
                <td><input type="checkbox" name="OETIPC-C0" id="OETIPC-C1" class="reg_type" value="C"></td>
            </tr>
        </tbody>
    </table>

// Get registration option values and group for each row then create array
$('.registrant').each(function() {
  var attendee_reg_type = $(this).find('.reg_type:checked').map(function() {
    return this.value;
  }).get();
});

我需要输出类似于以下内容：

    <input type="hidden" name="opt_0" id="opt_0" class="get_options" value="(A,B)">
    <input type="hidden" name="opt_1" id="opt_1" class="get_options" value="(A,C)">
    ...

有人能帮忙吗？我对如何最好地做到这一点有些迷茫。我尝试了以下方法，但没有成功：

$('.registrant').each(function() {
  var attendee_reg_type = $(this).find('.reg_type:checked').map(function() {
    return this.value;
  }).get();
  $('#opt_[i]').val(attendee_reg_type[i]);
});

非常感谢您的帮助！

- SEM

“`.registrant'”元素是什么，它们在哪里？ - David Thomas

抱歉，@DavidThomas。.registrant是表格行的类。我编辑了上面的问题以显示这一点。 - SEM

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SmartDev · Accepted Answer

为什么不直接删除隐藏字段并将复选框重命名为这样：

    <table>
        <tbody>
            <tr>
                <td><input type="text" id="OETIPC-NAME0" name="OETIPC-NAME0"></td>
                <td><input type="checkbox" name="opt_0" id="OETIPC-A0" class="reg_type" value="A"></td>
                <td><input type="checkbox" name="opt_0" id="OETIPC-B0" class="reg_type" value="B"></td>
                <td><input type="checkbox" name="opt_0" id="OETIPC-C0" class="reg_type" value="C"></td>
            </tr>
            <tr>
                <td><input type="text" id="OETIPC-NAME1" name="OETIPC-NAME1"></td>
                <td><input type="checkbox" name="opt_1" id="OETIPC-A1" class="reg_type" value="A"></td>
                <td><input type="checkbox" name="opt_1" id="OETIPC-B1" class="reg_type" value="B"></td>
                <td><input type="checkbox" name="opt_1" id="OETIPC-C1" class="reg_type" value="C"></td>
            </tr>
        </tbody>
    </table>

现在，当你提交表单时，你将会得到以逗号分隔的选中值，分别存储在 opt_0 和 opt_1 键中。

jQuery 解决方案：

$('.registrant').each(function (index) {
    var attendee_reg_type = $(this).find('.reg_type:checked').map(function () {
        return this.value;
    }).get().join(",");
    $("#opt_" + index).val(attendee_reg_type);
});