Question

我希望jQuery自动将所选复选框的值和所选选项的值（下拉列表）添加到文本区域。到目前为止，这是我所做的：

HTML：

$("#voucher_150 :checkbox, #voucher_200 :checkbox").change(function() {   
var text = $("#voucher_150 :checked, #voucher_200 :checked").map(function() {
    return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});

jQuery：

filter()

字段： here

此外，我不明白为什么复选框值后会投放1,1？因此，结果我认为它看起来是这样的：

€150-优惠券x 2张

€200-优惠券x 1张

Answer 1

同时选中两个复选框，将返回它们的值。要轻松修复它，您应该为所有人致电onchange

$("#voucher_150 :checkbox").change(function() {   
    var text = $("#voucher_150 :checked").map(function() {
        return this.value;
    }).get().join(" ");
    $("#get_checked").val(text);
});

Answer 2

我不明白为什么要投放广告1

您正在选择器中使用:checked ...因此它也将获得<select>的值。

由于您希望在复选框值中插入span文本，所以我将使用.each()循环而不是.map()。

$(document).ready(function() {

  // Event handler for checkboxes AND selects
  $("[type='checkbox'], select").on("change", function() {
    
    // Empty string
    var text = "";

    // For each checked checkbox
    $("[type='checkbox']:checked").each(function() {
    
      // Get the span text
      text += $(this).siblings("span").first().text();
      
      // Get the select value
      text += $(this).siblings("select").val();
      
      // Line return
      text += "\n";
    });

    // Set the textarea value
    $("#get_checked").val(text);
  });

});

textarea{
  width: 16em;
  height: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-4 col-sm-6 col-xs-12">
  <div class="wpcf7-list-item" id="voucher_150">
    <input type="checkbox" name="checkbox-680" value="150" id="Product50">
    <span class="wpcf7-list-item-label 150guts">150€ Voucher x </span>
    <select name="form[QuantityProd5][]" id="QuantityProd5" class="rsform-select-box ">
      <option value="1 ">1</option>
      <option value="2 ">2</option>
      <option value="3 ">3</option>
      <option value="4 ">4</option>
      <option value="5 ">5</option>
      <option value="6 ">6</option>
      <option value="7 ">7</option>
      <option value="8 ">8</option>
      <option value="9 ">9</option>
      <option value="10 ">10</option>
    </select>
    <span>&nbsp;Stück</span>
  </div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
  <div class="wpcf7-list-item" id="voucher_200">
    <input type="checkbox" name="checkbox-680" value="200" id="Product60">
    <span class="wpcf7-list-item-label 150guts ">200€ Voucher x </span>
    <select name="form[QuantityProd6][]" id="QuantityProd6" class="rsform-select-box ">
      <option value="1 ">1</option>
      <option value="2 ">2</option>
      <option value="3 ">3</option>
      <option value="4 ">4</option>
      <option value="5 ">5</option>
      <option value="6 ">6</option>
      <option value="7 ">7</option>
      <option value="8 ">8</option>
      <option value="9 ">9</option>
      <option value="10 ">10</option>
    </select>
    <span>&nbsp;Stück</span>
  </div>
</div>


<div id="t_area">
  <textarea id="get_checked"></textarea>
</div>

也...小心标记属性中的多余空格。 id="get_checked "与id="get_checked"的不同之处在于，不会忽略空格。

如何使用jQuery为选中的复选框添加值并选择选项？

2 个答案: