Validation of checkboxes with the same name

Question

I need to show an error if none of the below checkboxes are checked using using JavaScript.

<tr>
  <td>Status</td>
  <td colspan="3">
    <input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single

    <input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married

    <input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee

    <input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
  </td>
</tr>

`var anychecked = $('input[name="chk_stat[]"]').is(':checked')` — Arun P Johny, Feb 24 '16 at 08:30
Anyway this should be re-opened because the other Q&A isn't using vanilla JS... — Matías Fidemraizer, Feb 24 '16 at 08:45
@ArunPJohny : how can check and where should i write error msg after var anychecked = $('input[name="chk_stat[]"]').is(':checked') — Dew Drop, Feb 24 '16 at 09:01

Matías Fidemraizer · Accepted Answer · 2016-02-24T09:02:06.463

You can implement it using selecting all elements with some given name using document.querySelectorAll and an attribute selector using the pseudoclass :checked:

var checkedCheckboxes = document.querySelectorAll("[name='chk_stat[]']:checked");

if (checkedCheckboxes.length == 0) {
  console.log("No checkbox is checked...");
}

<tr>
  <td>Status</td>
  <td colspan="3">
    <input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single

    <input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married

    <input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee

    <input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
  </td>
</tr>

Thank you so much for your help – Dew Drop Feb 24 '16 at 09:09 — Dew Drop, Feb 24 '16 at 09:09

Validation of checkboxes with the same name

1 Answers1