如何将复选框值添加到 textarea 字段

Question

我有 textarea 字段和 3 组复选框。用户可以单独选择任何复选框，复选框值将添加到 textarea 字段。但是如何包含“全选”功能来选择组中的所有复选框？我创建了“全选”功能，但选择值后没有添加到 textarea 字段。

// Add checkbox value to text field
$checks = $("ul li :checkbox");
$checks.on("change", function() {
  var string = $checks.filter(":checked").map(function(i,v){
    return this.value;
  }).get().join(",");
  $("#results").val( "checked:" + string);
});

// Select all checkboxes in the group
jQuery(function($){
  $('#allg1').click(function () { $('.group1 li input').not(this).prop('checked', this.checked);});
  $('#allg2').click(function () { $('.group2 li input').not(this).prop('checked', this.checked);});
  $('#allg3').click(function () { $('.group3 li input').not(this).prop('checked', this.checked);});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="results" rows="2" cols="60"> </textarea>

<ul class="group1">
  <input type="checkbox" id="allg1" name="allg1"><label for="allg1">Select all from group G1</label>
  <li><input type="checkbox" value="G101"></li>
  <li><input type="checkbox" value="G102"></li>
  <li><input type="checkbox" value="G103"></li>
</ul>

<ul class="group2">
  <input type="checkbox" id="allg2" name="allg2"><label for="allg2">Select all from group G2</label>
  <li><input type="checkbox" value="G201"></li>
  <li><input type="checkbox" value="G202"></li>
  <li><input type="checkbox" value="G203"></li>
</ul>

<ul class="group3">
  <input type="checkbox" id="allg3" name="allg3"><label for="allg3">Select all from group G3</label>
  <li><input type="checkbox" value="G301"></li>
  <li><input type="checkbox" value="G302"></li>
  <li><input type="checkbox" value="G303"></li>
</ul>

Answer 1

要实现这一点，您可以在切换“全选”时在复选框上手动trigger()change 事件。然后，您的正常事件处理程序将运行，更新文本框中的文本。

还请注意，您可以通过在它们上使用常见的class 属性来干燥控制“全选”框的 JS。

jQuery($ => {
  // Add checkbox value to text field
  let $checks = $("ul li :checkbox").on("change", function() {
    let string = $checks.filter(":checked").map((i, el) => el.value).get().join(",");
    $("#results").val(string && "checked:" + string);
  });

  // Select all checkboxes in the group
  $('.all').click(e => {
    $(e.target).closest('.group').find('li input').not(e.target).prop('checked', e.target.checked).trigger('change');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="results" rows="2" cols="60"> </textarea>

<ul class="group">
  <label><input type="checkbox" class="all" name="allg1">Select all from group G1</label>
  <li><input type="checkbox" value="G101"></li>
  <li><input type="checkbox" value="G102"></li>
  <li><input type="checkbox" value="G103"></li>
</ul>

<ul class="group">
  <label><input type="checkbox" class="all" name="allg2">Select all from group G2</label>
  <li><input type="checkbox" value="G201"></li>
  <li><input type="checkbox" value="G202"></li>
  <li><input type="checkbox" value="G203"></li>
</ul>

<ul class="group">
  <label><input type="checkbox" class="all" name="allg3">Select all from group G3</label>
  <li><input type="checkbox" value="G301"></li>
  <li><input type="checkbox" value="G302"></li>
  <li><input type="checkbox" value="G303"></li>
</ul>