javascript - 使用 JQuery 如何将一组来自复选框的输入放入一个变量中？

Question

我想将这个 jquery 提交的数据放入一个我可以放入 html 的变量中。我正在使用追加按钮将 html 添加到我的表单，但无法弄清楚如何将 data 变量制作成每个复选框值的数组。

https://jsfiddle.net/soljohnston777/k5yc1y2a/2/

JQuery:

$(".checkboxadd").click(function(){
                $('[id^="add_policies_checkbox"]').each(function(i, v){
                  //alert(this.value);
                  if($(v).prop('checked')){
                  var data=$(v).val();
                  $("#div_to_add_this_checkbox_value").append("<input type=hidden name='pnpID_instructions' value=\'"+data+"\' />P&P #'s: "+data+"");}
                });
});//end ajaxifypolicies

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="checkbox" value="1" id="add_policies_checkbox1"/>
  <input type="checkbox" value="2" id="add_policies_checkbox2"/>
  <input type="checkbox" value="3" id="add_policies_checkbox3"/>
  <button class="checkboxadd">Submit</button>
<div id="div_to_add_this_checkbox_value"></div>
<div> Check mark all 3 then hit submit, What I want is the output like an array:<br>P&P #'s:1,2,3 <br> (and the hidden value="1,2,3")
</div>

Answer 1

要将数组转换为字符串，您可以使用 array.join(',')。

$(".checkboxadd").click(function() {
var data = [];
$('[id^="add_policies_checkbox"]').each(function(i, v) {  
  if ($(v).prop('checked')) {
    data.push($(v).val());
  }
});
console.log(data);

$("#div_to_add_this_checkbox_value").html('P&P #s:' + data.join(',') + "<input type='hidden' name='pnpID_instructions' value='"+data.join(',')+"' />");


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="add_policies_checkbox1" />
<input type="checkbox" value="2" id="add_policies_checkbox2" />
<input type="checkbox" value="3" id="add_policies_checkbox3" />
<button class="checkboxadd">Submit</button>
<div id="div_to_add_this_checkbox_value"></div>