How to See Which Checkbox Is Checked

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;

Get the value of checked checkbox?

For modern browsers:

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

By using jQuery:

var checkedValue = $('.messageCheckbox:checked').val();

Pure javascript without jQuery:

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

How do I see which checkbox is checked?

If the checkbox is checked, then the checkbox's value will be passed. Otherwise, the field is not passed in the HTTP post.

if (isset($_POST['mycheckbox'])) {
    echo "checked!";
}

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

How to tell what checkboxes are checked on page load?

Combine the selectors "#allocation input:checked" (or "#allocation input:checkbox:checked") which will give you an array of all checkboxes that are checked. Then loop through them with each() and you can get the id with this.id.

Put the entire code in a self-executing function (function() {...})(); at the bottom of your code or at least bellow all the checkboxes. Something like this:

(function() {

  $("#allocation input:checked").each(function() {

    console.log(this.id + " is checked")

  });

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="allocation">

  <input type="checkbox" id="chk1" checked="checked" /> Option 1

  <input type="checkbox" id="chk2" /> Option 2

  <input type="checkbox" id="chk3" /> Option 3

  <input type="checkbox" id="chk4" checked="checked" /> Option 4

  <input type="checkbox" id="chk5" checked="checked" /> Option 5

</div>

How to see if any of all checkboxes are checked using jQuery

You can simply use the following bit of jQuery, which basically comes down to having a selector to get (all) checked checkboxes:

$("input[type=checkbox]:checked").length === 0

If you happen to have other checkboxes in your form, throw in a class:

<input type="checkbox" class="seat" ... />

$("input.seats[type=checkbox]:checked").length === 0

Setting the disabled state of the submit button can be done using:

$("input[type=submit]").prop("disabled", disabled);

where disabled is a boolean.

Knowing this, you use it to set the submit button disabled state like:

$("input[type=submit]").prop("disabled", $("input[type=checkbox]:checked").length === 0);

Dynamically check if the checkbox is checked on-fly

You can use the querySelectorAll function to get list of checked checkbox in specific div.

If size of list > 0, it contains checked checkbox.

1. Check if one item or more item is checked under Doctor.

   document.querySelectorAll('#doctor input[type=checkbox]:checked').length > 0

2. Check if one item or more item is checked under patient.

   document.querySelectorAll('#patient input[type=checkbox]:checked').length > 0

Correct way of knowing if a checkbox is checked

Checkbox values should not get submitted if they are not checked.

If you want to check with jQuery, I would always use:

var isChecked = $('#checkbox').prop('checked');

Or

var isChecked = $('#checkbox').is(':checked');

With JavaScript, you have to understand the difference between attributes and properties. checked is both a property and an attribute. However, the attribute checked isn't always updated when the checked property of a checkbox changes (in some browsers it is). Think of the attribute as the value in the HTML markup parsed by the DOM. The checked property is an actual member of the checkbox element in the DOM, which always changes based on whether the box is checked or unchecked in the UI.

If you want to try a foolproof method without needed JavaScript, you can try it the "MVC" way, by rendering a hidden input and a checkbox with the same name, each with appropriate "checked"-state values:

<input type="hidden" name="mybox" value="false" />
<input type="checkbox" name="mybox" value="true" />

When you submit the form, if you can't find a mybox value in the request with a value of "true" then the checkbox was not checked. More about that here.

How to determine whether a checkbox is checked or not in Vue js

You can do something like:

if(this.rolesSelected != "") {
   alert('isSelected');
}

or
v-on:click="samplefunction({{$role->id}},$event)"

samplefunction : function(value,event) {
    if (event.target.checked) {
       alert('isSelected');
    }
}

---

Related Topics