Check whether all checkboxes are checked and then execute a function

Question

How could I make this code dry?

$("#btnSubmitToCheckOut").click(function(event) {
 var isSelected = [];
 $(".age_agree :checkbox").each(function() {
 if ($(this).is(":checked")) {
 isSelected.push("true");
 } else {
 isSelected.push("false");
 }
 });
 if ($.inArray("false", isSelected) < 0) {
 $(this).parents('form').submit();
 } else {
 alert('Please accept all the Terms and Conditions');
 }
 });

Answer 1

I was thinking something along these lines. The condition checks whether there are no unchecked checkboxes (length of the selection is 0) and then executes the appropriate branch.

$("#btnSubmitToCheckOut").click(function(event) {
 if ($('.age_agree input[type="checkbox"]').not(':checked').length == 0) {
 $(this).parents('form').submit();
 } else {
 alert('Please accept all the Terms and Conditions');
 }
});

• Nihathrael: I think I'd make the length > 0 explicit in the condition, as it is easier to read on first sight.
• Robby Cornelissen: @Nihathrael I was waiting for that comment. I guess it's a matter of preference, but since this is code review, and clarity never hurts, I'll update my answer.
• Ismael Miguel: Please, use .age_agree input[type="checkbox"] instead. You will notice a difference in performance on most modern browsers. :checked is a jQuery extension and will be processed by javascript, while input[type="checkbox"] will be processed by querySelectorAll() (if supported) instead, which will be parsed using the CSS selector engine of the browser.
• Robby Cornelissen: @IsmaelMiguel Thanks for the insights. I've tested this with 10 checkboxes in a simple page in Chrome, and over 1 million executions, your version is indeed about 4.5 times as fast (35 seconds vs 165 seconds). I've updated my answer.
• Ismael Miguel: Forgot one important thing! The documentation backing up what I stated: api.jquery.com/checkbox-selector (you should add this to your answer)

Answer 2

I came up with this somewhat shorter solution.

Using an array to find out if one of the checkboxes has not been clicked is unnecessary here, as you are only interested in if all checkboxes are clicked or not. That leads to two possible solutions, one is using a booling to saving the state using a normal for loop or using an early return to break from the loop in case a checkbox that has not been clicked is found. I decided to go with the early return as it shortens the method and removes the need for the if/else construct at the end.

$("#btnSubmitToCheckOut").click(function(event) {
 var checkBoxes = $(".age_agree :checkbox")
 for(int i=0; i < checkBoxes.length; i++) {
 if (!checkBoxes[i].is(":checked")) {
 alert('Please accept all the Terms and Conditions');
 return;
 }
 };
 $(this).parents('form').submit();
});

What do you think?