check if all inputs are checked

Question

I have 2 buttons and 2 inputs. The "buy"-button should only fire its default function when both inputs are checked. If not it should mark them with a red border. What am I doing wrong here?

 jQuery(function($) { $('.checkedterms:checked').length == $('.checkedterms').length $("#upsellyes").click(function(e) { $(".checkedterms").change(function(){ if (!$('.checkedterms:checked').length == $('.checkedterms').length) { e.preventDefault(); $("#terms-required").addClass('invalid'); } else { $("#terms-required").removeClass('invalid'); } }); }); }); 

 .invalid { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="terms-required"> <input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Allgemeinen Geschäftsbedingungen</a>.<span class="required">*</span></label><br /> <input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Widerrufsbelehrung</a>.<span class="required">*</span></label><br /> </div><br> <a href="#" id="upsellyes">buy</a><br><br> <a href="#">no thanks</a> 

Answer 1

There's a couple of issues here:

• You've got an equality check at the start of the code which does nothing.
• You've nested the change handler on the checkboxes within the click handler of the button; remove it.
• Unrelated to the issue, but you are using duplicate id attributes. They need to be unique within the DOM.
• Your logic is backwards. You state that you want the red border to only appear when both checkboxes are not checked when the 'Buy' button is clicked.

You can also make the logic more succinct by caching the checkbox selector and using toggleClass() . Something like this:

 jQuery(function($) { $("#upsellyes").click(function(e) { var $terms = $('.checkedterms'); $("#terms-required").toggleClass('invalid', $terms.length != $terms.filter(':checked').length); }); }); 

 .invalid { border: 1px solid red; } .checkedterms { position: absolute; } label { display: inline-block!important; font-weight: normal!important; margin-left: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="terms-required"> <input type="checkbox" class="checkedterms" name="terms" /> <label for="terms" class="checkbox"> I have read <a href="#">Allgemeinen Geschäftsbedingungen</a>. <span class="required">*</span> </label><br /> <input type="checkbox" class="checkedterms" name="terms" /> <label for="terms" class="checkbox"> I have read <a href="#" >Widerrufsbelehrung</a>. <span class="required">*</span> </label><br /> </div><br /> <a href="#" id="upsellyes">buy</a><br><br> <a href="#">no thanks</a> 

Finally note the use of a separate stylesheet. Inline styling is a bad idea and should be avoided where possible.

Answer 2

remove this line

$(".checkedterms").change(function(){ //remove
    //keep the code that's currently here
}); //remove

leaving you with

jQuery(function($) {
    $('.checkedterms:checked').length == $('.checkedterms').length
    $("#upsellyes").click(function(e) {
        if ($('.checkedterms:checked').length != $('.checkedterms').length) {
            e.preventDefault();
            $("#terms-required").addClass('invalid');
        } 
        else {
            $("#terms-required").removeClass('invalid');
        }
    });
});

the code wasn't running because you were setting an event listener on the checkboxes inside the event listener on the button. what was happening is that when you clicked the button, javascript would set an event listener on the checkboxes that fires when their state changes

Answer 3

You need an if statement at line 2 and one more '='

if ($('.checkedterms:checked').length === $('.checkedterms').length) {
 ....
}

and you should put an eventListener each input change