Getting the values of all checkbox checked in a group as comma separated

I have a group of checkbox

<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely1" value="1">
  <label for="cmsms_which_days_are_you_most_likely1">Monday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely2" value="2">
  <label for="cmsms_which_days_are_you_most_likely2">Tuesday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely3" value="3">
  <label for="cmsms_which_days_are_you_most_likely3">Wednesday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely4" value="4">
  <label for="cmsms_which_days_are_you_most_likely4">Thursday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely5" value="5">
  <label for="cmsms_which_days_are_you_most_likely5">Friday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely6" value="6">
  <label for="cmsms_which_days_are_you_most_likely6">Saterday</label>
</div>
<div class="cl"></div>
<div class="check_parent">
  <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely7" value="7">
  <label for="cmsms_which_days_are_you_most_likely7">Sunday</label>
</div>

                                        

When the checkbox values are changing I want to get the checked values of checkbox as an array or comma separated value using jQuery.

1 answer

  • answered 2020-06-27 04:33 Shree

    Give class to your check box and use map to push your selected value like below.

    $(".chkDay").change(function() {
      var arr = $(".chkDay:checked").map(function() {
        return this.value;
        //  return $(this).next('label').text(); // If you want sunday , monday ... on array , uncomment this line comment above line. 
      }).get();
      console.log(arr);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely1" value="1" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely1">Monday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely2" value="2" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely2">Tuesday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely3" value="3" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely3">Wednesday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely4" value="4" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely4">Thursday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely5" value="5" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely5">Friday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely6" value="6" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely6">Saterday</label>
    </div>
    <div class="cl"></div>
    <div class="check_parent">
      <input type="checkbox" name="cmsms_which_days_are_you_most_likely" id="cmsms_which_days_are_you_most_likely7" value="7" class="chkDay">
      <label for="cmsms_which_days_are_you_most_likely7">Sunday</label>
    </div>