Get the Value of Checked Checkbox

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 to get the value of checked checkbox in vanilla JavaScript?

You can simply use querySelectorAll method and use forEach method to check which checkbox was clicked using addEventListener with change function in it.

Edit: If you want to get the value of checkbox when checked you can checked property and then display its value.

Live Demo

let allCheckBox = document.querySelectorAll('.shapes')

  allCheckBox.forEach((checkbox) => { 
  checkbox.addEventListener('change', (event) => {
    if (event.target.checked) {
      console.log(event.target.value)
    }
  })
})

<div class="js-shapes">
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label>
  </span>

</div>

use jQuery to get values of selected checkboxes

In jQuery just use an attribute selector like

$('input[name="locationthemes"]:checked');

to select all checked inputs with name "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Demo

---

In VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Demo

---

In ES6/spread operator

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Demo

Getting all selected checkboxes in an array

Formatted :

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Hopefully, it will work.

jQuery - get value of checked checkbox that has a certain class

Since you seem to be using jQuery, stick with it:

$('input.radioListMode:checked').val();

How to get value of checked dynamic checkboxes

You need to use the :checked selector to retrieve only the checkboxes which have been selected. Also note that you should use the change event when dealing with checkbox and radio inputs. Try this:

$(".checkBoxes").change(() => {
  let searchIDs = $(".checkBoxes:checked").map((i, cb) => cb.value).get();
  console.log(searchIDs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name1" id="name1" /></td>
    <td><label for="name1">Name1</label></td>
  </tr>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name2" id="name2" /></td>
    <td><label for="name2">Name2</label></td>
  </tr>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name3" id="name3" /></td>
    <td><label for="name3">Name3</label></td>
  </tr>
</table>

Get checkbox value in jQuery

To get the value of the Value attribute you can do something like this:

$("input[type='checkbox']").val();

Or if you have set a class or id for it, you can:

$('#check_id').val();
$('.check_class').val();

However this will return the same value whether it is checked or not, this can be confusing as it is different to the submitted form behaviour.

To check whether it is checked or not, do:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

how to get checkbox value in angular?

you need to use change event

<mat-checkbox (change)="checkCheckBoxvalue($event)">Check me!</mat-checkbox>

checkCheckBoxvalue(event){
    console.log(event.checked)
  }

Working Example

other ways -

• You can use two way data binding for the same like mentioned below -

  <input type="checkbox" name="myData" [(ngModel)]="isChecked">
  

• You can use a local variable as well and fetch the value in controller side like below -

  <input type="checkbox" name="myData" #myCheckbox>
  
  @ViewChild('myCheckbox') myCheckbox;
  console.log(myCheckbox, 'Value of checkbox');
  

• Other way is you can use formControl for the same, either it can be model-driven form or template-driven form.

how to get checkboxes values by name and check if these value exists in another array, become checked jquery laravel?

JQuery is outdated and not recommended anymore nowadays, var is also not recommended anymore, below I made a solution in pure JS:

const list = [1, 2, 3];

for (const checkbox of document.querySelectorAll("#contactsCheckbox[name=contactsCheckboxEdit]")) {
  if (list.includes(Number(checkbox.value))) {
    checkbox.checked = true;
  }
}

<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="1">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="2">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="3">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="4">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="5">

get value of checked checkbox

While it's been some time, I thought I'd offer a suggestion:

$('input[type="checkbox"]').change(function(){
    $('#YYY')
        .val($('input[type="checkbox"]:checked')
        .map(function(){
            return this.value;
        }).get().join(', '));
}).change();

JS Fiddle demo.

References:

• Attribute-equals ([attribute="value"]) selector.
• change().
• get().
• map().
• val().

---

Related Topics