Space 在 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 值之间有空格。 如何在值之间获取空格？请帮帮我

Answer 1

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

$('.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();

Answer 2

问题是因为 jQuery 在字段值中显示数组时正在调用数组 join()。默认情况下，这使用 ',' 来分隔值。

相反，您想使用 join(', ')（注意结尾的 space），这样您就可以在设置 val():

时手动调用它

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

这是一个完整的工作示例，使用 map() 而不是 each() 稍微更简洁：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />

另请注意，Monday 复选框在选择器中没有 name 属性，因此似乎不起作用。我不确定这是故意的还是打字错误。

Space 在 jQuery 中的 .push 数组值之间

Space between .push array values in jQuery

javascript

arrays

jquery

jquery-ui

jquery-events