获取两个复选框值

Question

I have two checkboxes which I have to run 3 different functions depending on what's checked by the user.

However I don't seem to be able to get the values correctly:

 $('#checks').click(function() { if (!$('#different-billing-address').is(":checked") && $('#ccheck').is(":checked")) {alert("function1");} if ($('#different-billing-address').is(":checked") && !$('#ccheck').is(":checked")) {alert("function2");} if (!$('#different-billing-address').is(":checked") && !$('#ccheck').is(":checked")) {alert("function3");} });

 <input type="checkbox" id="different-billing-address" data-multiplier="0.9" name="deliveryAddressSameAsBillingAddress" aria-expanded="false"> <label for="different-billing-address" class="checkbox-button">Delivery address is the same as billing address </label> <br> <input type="checkbox" id="ccheck" style="float:left;"> <label id="ocpc" class="checkbox-button">&nbsp;Get it delivered to an Order and Collection Point</label> <br> <button id="checks">MyButton</button>

Can someone explain to me why is this not working?

Answer 1

Your logic looks fine. However, there's not enough information to tell why your code does not work. It could have been caused by one of the following:

1. Please include jQuery in the head section of your code or at the bottom but right before your code.
2. You need to enclose your code in DOM ready $(function() { /* your code here */ }); to ensure your code fires when the DOM has loaded.

The following demo uses your logic and works fine.

 $(function() { var check1 = $('#different-billing-address'), check2 = $('#ccheck'), button = $('#checks'); button.on('click', function() { if( !check1.is(':checked') && check2.is(':checked') ) { console.log('Function1'); } if( check1.is(':checked') && !check2.is(':checked') ) { console.log('Function2'); } if( !check1.is(':checked') && !check2.is(':checked') ) { console.log('Function3'); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="different-billing-address" data-multiplier="0.9" name="deliveryAddressSameAsBillingAddress" aria-expanded="false"> <label for="different-billing-address" class="checkbox-button">Delivery address is the same as billing address </label> <br> <input type="checkbox" id="ccheck" style="float:left;"> <label id="ocpc" class="checkbox-button">&nbsp;Get it delivered to an Order and Collection Point</label> <br> <button id="checks">MyButton</button>