javascript - jQuery中.push数组值之间的空格

Question

我创建了天名 7 个复选框和 1 个input type hidden。如果用户单击作为复选框的日期名称。然后它们的值打印在输入中。
这是我的代码：

<div class="ml-4">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="monday" name="days_names" value="Monday">
        <label class="custom-control-label" for="monday">Monday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
        <label class="custom-control-label" for="tuesday">Tuesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
        <label class="custom-control-label" for="wednesday">Wednesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
        <label class="custom-control-label" for="thursday">Thursday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
        <label class="custom-control-label" for="friday">Friday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
        <label class="custom-control-label" for="saturday">Saturday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
        <label class="custom-control-label" for="sunday">Sunday</label>
    </div>
</div>
<input type="" class="form-control selected_days_names" name="days_names" />

<script>
    $(document).ready(function() {
        $("input[name='day_name_selector']").change(function() {
            var final = new Array();
            $('input[name="day_name_selector"]:checked').each(function(){        
                var values = $(this).val();
                final.push(values);
            });
            $('.selected_days_names').val(final);
        });
    });
</script>

问题是，我在输入中获取值而没有像这样的空格-> Sunday,Monday,Tuesday.....我希望它显示像这样的输入中的值-->Sunday, Monday, Tuesday值之间有空格。 如何在值之间获取空格？请帮我

标签： javascriptjqueryarraysjquery-uijquery-events

Answer 1

final是一个数组，当您调用 时.val，传递的表达式会自动转换为字符串。当数组转换为字符串时，默认情况下，它会以逗号连接，例如.join(','). 如果您想通过其他任何方式（如逗号和空格）加入，您必须明确地这样做：

$('.selected_days_names').val(final.join(', '));

[]还可以考虑使用而不是声明数组new Array()：

var final = [];

您还可以考虑使用以下命令一次构建数组.map：

  var final = $('input[name="day_name_selector"]:checked')
    .map(function(){
      return $(this).val();
    })
    .get();