使用 jQuery 将复选框值组映射到输入字段

Question

我有多组复选框，我希望将值复制到每个复选框的文本字段中。

我之前找到了一个很好的答案（如下），但是当我想分组获取值时，这似乎只适用于表单中的所有复选框。我已经尝试通过将自定义类分配给复选框组来应用此方法，以便我可以单独捕获它们，但没有任何成功。

工作代码

$checks = $(":checkbox");
    $checks.on('change', function () {
        var string = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join(", ");
        $('#testField').val(string);
    });

已经尝试过，但没有运气

$checks = $(".customClass");
    $checks.on('change', function () {
        var string = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join(", ");
        $('#testField').val(string);
    });

Answer 1

您可以简单地使用$('.customClass:checked').get().map(e => e.value).join(', ')：

• $('.customClass:checked') 获取每个选中的复选框

• .get() 从您的 jQuery 对象列表中获取 NodeList

• .map(e => e.value) 将您的 NodeList 转换为值列表

• .join(', ') 连接String 中的值

$('.customClass').on('change', () => {
  $('#testField').val($('.customClass:checked').get().map(e => e.value).join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="customClass" value="1">
<input type="checkbox" class="customClass" value="2">
<input type="checkbox" class="customClass" value="3">
<input type="checkbox" class="customClass" value="4">

<input type="text" id="testField">