I am trying to add to array checked checkboxes, but the array comes up empty, what am I doing wrong on my script?
JavaScript
x
8
1
var availability = [];2
$('input[type="checkbox"]').change(function() {3
4
$('.availability input:checked').each(function() {5
availability.push($(this).attr('name'));6
});7
console.log(availability);8
});JavaScript
1
48
48
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<!doctype html>3
<html lang="en">4
5
<head></head>6
7
<body>8
<table cellspacing="0" cellpadding="0">9
<colgroup>10
<col width="80" />11
<col width="64" span="2" />12
</colgroup>13
<tbody>14
<tr>15
<td width="88"></td>16
<td width="64">AM</td>17
<td width="64">PM</td>18
</tr>19
<tr>20
<td>Monday</td>21
<td><input name="mondayAM" class="form-check-input availability" id="mondayAM" type="checkbox" /></td>22
<td><input name="mondayPM" class="form-check-input availability" id="mondayPM" type="checkbox" /></td>23
</tr>24
<tr>25
<td>Tuesday</td>26
<td><input name="tuesdayAM" class="form-check-input availability" id="tuesdayAM" type="checkbox" /></td>27
<td><input name="tuesdayPM" class="form-check-input availability" id="tuesdayPM" type="checkbox" /></td>28
</tr>29
<tr>30
<td>Wednesday</td>31
<td><input name="wednesdayAM" class="form-check-input availability" id="wednesdayAM" type="checkbox" /></td>32
<td><input name="wednesdayPM" class="form-check-input availability" id="wednesdayPM" type="checkbox" /></td>33
</tr>34
<tr>35
<td>Thursday</td>36
<td><input name="thursdayAM" class="form-check-input availability" id="thursdayAM" type="checkbox" /></td>37
<td><input name="thursdayPM" class="form-check-input availability" id="thursdayPM" type="checkbox" /></td>38
</tr>39
<tr>40
<td>Friday</td>41
<td><input name="fridayAM" class="form-check-input availability" id="fridayAM" type="checkbox" /></td>42
<td><input name="fridayPM" class="form-check-input availability" id="fridayPM" type="checkbox" /></td>43
</tr>44
</tbody>45
</table>46
</body>47
48
</html>Advertisement
Answer
Fix
JavaScript
1
7
1
$('input[type="checkbox"]').change(function() {2
var availability = [];3
$('input.availability:checked').each(function() {4
availability.push($(this).attr('name'));5
});6
console.log(availability);7
});JavaScript
1
48
48
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<!doctype html>3
<html lang="en">4
5
<head></head>6
7
<body>8
<table cellspacing="0" cellpadding="0">9
<colgroup>10
<col width="80" />11
<col width="64" span="2" />12
</colgroup>13
<tbody>14
<tr>15
<td width="88"></td>16
<td width="64">AM</td>17
<td width="64">PM</td>18
</tr>19
<tr>20
<td>Monday</td>21
<td><input name="mondayAM" class="form-check-input availability" id="mondayAM" type="checkbox" /></td>22
<td><input name="mondayPM" class="form-check-input availability" id="mondayPM" type="checkbox" /></td>23
</tr>24
<tr>25
<td>Tuesday</td>26
<td><input name="tuesdayAM" class="form-check-input availability" id="tuesdayAM" type="checkbox" /></td>27
<td><input name="tuesdayPM" class="form-check-input availability" id="tuesdayPM" type="checkbox" /></td>28
</tr>29
<tr>30
<td>Wednesday</td>31
<td><input name="wednesdayAM" class="form-check-input availability" id="wednesdayAM" type="checkbox" /></td>32
<td><input name="wednesdayPM" class="form-check-input availability" id="wednesdayPM" type="checkbox" /></td>33
</tr>34
<tr>35
<td>Thursday</td>36
<td><input name="thursdayAM" class="form-check-input availability" id="thursdayAM" type="checkbox" /></td>37
<td><input name="thursdayPM" class="form-check-input availability" id="thursdayPM" type="checkbox" /></td>38
</tr>39
<tr>40
<td>Friday</td>41
<td><input name="fridayAM" class="form-check-input availability" id="fridayAM" type="checkbox" /></td>42
<td><input name="fridayPM" class="form-check-input availability" id="fridayPM" type="checkbox" /></td>43
</tr>44
</tbody>45
</table>46
</body>47
48
</html>