Question

I need to use checkboxes, but there’s no submit button– it needs to have an effect on the page the user is already on, the same page that contains the checkboxes.

Essentially, I have ~10 checkbox elements. The user selects a certain number of them, then clicks a button element. When they click that element, I need to detect which checkboxes have been checked. What’s the best way to do that with the shortest amount of code?

Answer 1

Have all your checkboxes share the same class.

var allChecked = $(".checkBoxClass:checked");

This will return a list of checked checkboxes in the class checkBoxClass. Now you can iterate each element and operate on them.

for(var i=0; i<allChecked.length; i++) {    
  console.log("Checkbox " + $(allChecked[i]).val().toString() + " is checked");
}