mercredi 21 juillet 2021

How to add checkboxes values to textarea field

I have textarea field and 3 groups of checkboxes. User can individually select any checkbox and checkbox value will be added to textarea field. But how to include "Select all" functionality to select all checkboxes in group? I created "Select all" function, but after selection values are not added to textarea field.

// 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>



Aucun commentaire:

Enregistrer un commentaire