Testing If a Checkbox Is Checked with Jquery

Check if checkbox is checked with jQuery

IDs must be unique in your document, meaning that you shouldn't do this:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Instead, drop the ID, and then select them by name, or by a containing element:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

And now the jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

How do I check whether a checkbox is checked in jQuery?

This worked for me:

$get("isAgeSelected ").checked == true

Where isAgeSelected is the id of the control.

Also, @karim79's answer works fine. I am not sure what I missed at the time I tested it.

Note, this is answer uses Microsoft Ajax, not jQuery

jQuery if checkbox is checked

if ($('input.checkbox_check').is(':checked')) {

Checking the checkbox in jquery

You need to use the .is() method and the :checked selector.

On clicking of a checkbox - you iterate over the checkboxes with the required class (using the .each() method) and can test each to see if its checked or not.

Note the little ternary equation in there to demonstrate an alternative to the traditional if/ else block - but it does the same thing (the "?" line is equivalent to true and the ":" is equivalent to false / else....

EDIT - I have updated the function to match your needs. Basically you need to check if all the checkboxes are checked and if so - submit the form and if not - raise the error modal.

The following amended code should do that for you.

$('input[type="checkbox"]').click(function(){

let total = 0;
let checked = 0;

  $('.checkboxRequired').each(function(index){
    total += 1;
    if( $(this).is(':checked') ) {checked +=1 }
  })
  
  total === checked 
    ? ($('.orderForm').submit(), console.log('Form Submitted'))
    : $('#errorModal').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 1</label><br/>
<label> <input type="checkbox" class="checkbox "/> Checkbox 2</label><br/>
<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 3</label><br/>
<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 4</label><br/>
<label> <input type="checkbox" class="checkbox "/> Checkbox 5</label>

<!-- form
<form class="orderForm"  method="post"></form>
-->

<!-- Modal -->
<div id="errorModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Error Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>There is a disturbance in the force..... not all required checkboxes are checked</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Testing if a checkbox is checked with jQuery

Use .is(':checked') to determine whether or not it's checked, and then set your value accordingly.

More information here.

How to verify if checkbox is checked before proceeding?

It looks like what you want to do is stop the form from submitting if the checkbox is not checked. Your code will still submit the form, no matter what the outcome of your function is. What you need to do is put the inputs into a <form> tag, and add a handler for the onsubmit event, which will cancel the form submission.

HTML:

<form onsubmit="return check_checkbox()">
    <input type="checkbox" id="terms" unchecked/>Terms
    <br /><br />
    <button id="submit">
        continue
    </button>
</form>

Javascript:

function check_checkbox() 
{  
  if($('#terms').is(':checked')) {
    return true;
  } else {
    alert("To proceed you must accept the terms.");
    return false;
  }
}

http://jsfiddle.net/tjE24/47/

Check if 'this' checkbox is checked

What about this?

if($(this).is(':checked'))

---

Related Topics