Question

我有一个我正在创建的表单，其中包含一个带有一组复选框的初始表单字段：

<div class='form-group'>
    <label class="radio control-label" style="text-align:left;">Sizes</label>
    <label class="checkbox-inline"><input type="checkbox" value="728x90" name="sizes[]">728x90</label>
    <label class="checkbox-inline"><input type="checkbox" value="300x250" name="sizes[]">300x250</label>
    <label class="checkbox-inline"><input type="checkbox" value="320x50" name="sizes[]">320x50</label>
    <label class="checkbox-inline"><input type="checkbox" value="300x600" name="sizes[]">300x600</label>
    <label class="checkbox-inline"><input type="checkbox" value="510x60" name="sizes[]">510x60</label>
    <label class="checkbox-inline"><input type="checkbox" value="Other" name="sizes[]">Other</label>
    <input class="form-control" id="sizes" name="join_sizes[]" size="70" type="hidden" />
</div>

我有额外的jquery代码，在单击按钮时会添加上述代码的副本。

<input class="btn btn-success form-control add_field_button" type="button" value="+" />

运行附加脚本将值连接到隐藏字段“join_sizes []”。

$(window).load(function(){
    $(function() {
        $('input').on('click', function() {
        var values = [];
    $('input:checked').each(function() {
        values.push($(this).parent().text());
        });
    $('[name="join_sizes[]"]').attr({value: values.join(', ')});
        });
    });
});

检查我的POST数据时遇到的问题是，我得到一个join_sizes[]的字段与第一组框的选择相等/重复。

我认为我需要使用密钥，但无法弄明白。我感谢任何帮助。

Answer 1

此代码中有2个问题，

由于您正在使用动态元素，因此需要使用事件委派
勾选复选框时，需要在同一个`form-group

join_size

$(window).load(function() {
  $(document).on('click', 'input[name="sizes[]"]', function() {
    var $group = $(this).closest('.form-group');

    $group.find('input[name="join_sizes[]"]').val(function() {
      return $group.find('input[name="sizes[]"]:checked').map(function() {
        return this.value;
      }).get().join();
    });
  });

  $('.add_field_button').click(function() {
    var $clone = $('.form-group').first().clone();
    $clone.find('input:checkbox').prop('checked', false).end().find('input[name="join_sizes[]"]').val('');
    $clone.insertAfter('.form-group:last')
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-group'>
  <label class="radio control-label" style="text-align:left;">Sizes</label>
  <label class="checkbox-inline"><input type="checkbox" value="728x90" name="sizes[]">728x90</label>
  <label class="checkbox-inline"><input type="checkbox" value="300x250" name="sizes[]">300x250</label>
  <label class="checkbox-inline"><input type="checkbox" value="320x50" name="sizes[]">320x50</label>
  <label class="checkbox-inline"><input type="checkbox" value="300x600" name="sizes[]">300x600</label>
  <label class="checkbox-inline"><input type="checkbox" value="510x60" name="sizes[]">510x60</label>
  <label class="checkbox-inline"><input type="checkbox" value="Other" name="sizes[]">Other</label>
  <input class="form-control" id="sizes" name="join_sizes[]" size="70" />
</div>


<input class="btn btn-success form-control add_field_button" type="button" value="+" />

将每个动态创建的复选框数组加入到自己的逗号分隔列表中

1 个答案: