Home > database >  jQuery: push checked checkboxes to array
jQuery: push checked checkboxes to array

Time:07-30

I am trying to add to array checked checkboxes, but the array comes up empty, what am I doing wrong on my script?

var availability = [];
$('input[type="checkbox"]').change(function() {

  $('.availability input:checked').each(function() {
    availability.push($(this).attr('name'));
  });
  console.log(availability);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head></head>

<body>
  <table cellspacing="0" cellpadding="0">
    <colgroup>
      <col width="80" />
      <col width="64" span="2" />
    </colgroup>
    <tbody>
      <tr>
        <td width="88"></td>
        <td width="64">AM</td>
        <td width="64">PM</td>
      </tr>
      <tr>
        <td>Monday</td>
        <td><input name="mondayAM"  id="mondayAM" type="checkbox" /></td>
        <td><input name="mondayPM"  id="mondayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td><input name="tuesdayAM"  id="tuesdayAM" type="checkbox" /></td>
        <td><input name="tuesdayPM"  id="tuesdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td><input name="wednesdayAM"  id="wednesdayAM" type="checkbox" /></td>
        <td><input name="wednesdayPM"  id="wednesdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Thursday</td>
        <td><input name="thursdayAM"  id="thursdayAM" type="checkbox" /></td>
        <td><input name="thursdayPM"  id="thursdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Friday</td>
        <td><input name="fridayAM"  id="fridayAM" type="checkbox" /></td>
        <td><input name="fridayPM"  id="fridayPM" type="checkbox" /></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

CodePudding user response:

Fix

$('input[type="checkbox"]').change(function() {
var availability = [];
  $('input.availability:checked').each(function() {
    availability.push($(this).attr('name'));
  });
  console.log(availability);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head></head>

<body>
  <table cellspacing="0" cellpadding="0">
    <colgroup>
      <col width="80" />
      <col width="64" span="2" />
    </colgroup>
    <tbody>
      <tr>
        <td width="88"></td>
        <td width="64">AM</td>
        <td width="64">PM</td>
      </tr>
      <tr>
        <td>Monday</td>
        <td><input name="mondayAM"  id="mondayAM" type="checkbox" /></td>
        <td><input name="mondayPM"  id="mondayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Tuesday</td>
        <td><input name="tuesdayAM"  id="tuesdayAM" type="checkbox" /></td>
        <td><input name="tuesdayPM"  id="tuesdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Wednesday</td>
        <td><input name="wednesdayAM"  id="wednesdayAM" type="checkbox" /></td>
        <td><input name="wednesdayPM"  id="wednesdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Thursday</td>
        <td><input name="thursdayAM"  id="thursdayAM" type="checkbox" /></td>
        <td><input name="thursdayPM"  id="thursdayPM" type="checkbox" /></td>
      </tr>
      <tr>
        <td>Friday</td>
        <td><input name="fridayAM"  id="fridayAM" type="checkbox" /></td>
        <td><input name="fridayPM"  id="fridayPM" type="checkbox" /></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

  • Related