CODEWITHSUNDEEP
javascripthtmljquerycheckboxtextarea
Avigo
Avigo

Reputation: 159

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>

Upvotes: 1

Views: 554

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337743

To achieve this you can trigger() the change event manually on the checkboxes when the 'Select all' is toggled. Your normal event handler will then run which updates the text in the textbox.

Also note that you can DRY up the JS controlling the 'Select all' boxes by using common class attributes on them.

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>

Upvotes: 1

Related Questions