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" class="form-check-input availability" id="mondayAM" type="checkbox" /></td>
<td><input name="mondayPM" class="form-check-input availability" id="mondayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Tuesday</td>
<td><input name="tuesdayAM" class="form-check-input availability" id="tuesdayAM" type="checkbox" /></td>
<td><input name="tuesdayPM" class="form-check-input availability" id="tuesdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Wednesday</td>
<td><input name="wednesdayAM" class="form-check-input availability" id="wednesdayAM" type="checkbox" /></td>
<td><input name="wednesdayPM" class="form-check-input availability" id="wednesdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Thursday</td>
<td><input name="thursdayAM" class="form-check-input availability" id="thursdayAM" type="checkbox" /></td>
<td><input name="thursdayPM" class="form-check-input availability" id="thursdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Friday</td>
<td><input name="fridayAM" class="form-check-input availability" id="fridayAM" type="checkbox" /></td>
<td><input name="fridayPM" class="form-check-input availability" id="fridayPM" type="checkbox" /></td>
</tr>
</tbody>
</table>
</body>
</html>Advertisement
Answer
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" class="form-check-input availability" id="mondayAM" type="checkbox" /></td>
<td><input name="mondayPM" class="form-check-input availability" id="mondayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Tuesday</td>
<td><input name="tuesdayAM" class="form-check-input availability" id="tuesdayAM" type="checkbox" /></td>
<td><input name="tuesdayPM" class="form-check-input availability" id="tuesdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Wednesday</td>
<td><input name="wednesdayAM" class="form-check-input availability" id="wednesdayAM" type="checkbox" /></td>
<td><input name="wednesdayPM" class="form-check-input availability" id="wednesdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Thursday</td>
<td><input name="thursdayAM" class="form-check-input availability" id="thursdayAM" type="checkbox" /></td>
<td><input name="thursdayPM" class="form-check-input availability" id="thursdayPM" type="checkbox" /></td>
</tr>
<tr>
<td>Friday</td>
<td><input name="fridayAM" class="form-check-input availability" id="fridayAM" type="checkbox" /></td>
<td><input name="fridayPM" class="form-check-input availability" id="fridayPM" type="checkbox" /></td>
</tr>
</tbody>
</table>
</body>
</html>