Jquery Get Values of Checked Checkboxes into Array

jQuery get values of checked checkboxes into array

Call .get() at the very end to turn the resulting jQuery object into a true array.

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

Per the documentation:

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

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 selected checkbox values in array

1. Your selector is not correct.
2. You are not adding object to array.

Code

var ids = [];
var form = $(this).parents('form'); 
form.find(':checkbox:checked').each(function(i) {
    var obj = {};
    obj["id"] = $(this).val();

    //Push to array
    ids.push(obj)
});

Alternatively, .map() can be used

var ids = $(this).parents('form').find('input[type=checkbox]:checked').map(function() {
    return {
        id: $(this).val()
    }
}).get();

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

How to get all the value of checked checkboxes using jquery/javascript?

You can simply use jQuery's .map() and .get() on all the checked check boxes:

$("label > span:contains('OTHERS')").prev().prop('checked', false);
var valor = $('input[type=checkbox]:checked').map(function(){  return this.value; }).get();console.log(valor);
$("label > span:contains('OTHERS')").prev().change(function(){  if(!this.checked) alert('Others unchecked');});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group" id="documents">   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>   <br>   </label>   <div style="padding-bottom:5px"></div>   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>   <br>   </label>   <div style="padding-bottom:5px"></div>   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>   <br>   </label>   <div style="padding-bottom:5px"></div></div>

jQuery store selected checkboxes into array

The selector is not correct, change it to:

var $tuesday = $("input[type=checkbox][name='tuesday[]']:checked");

For getting the values you can use .map() method which returns an array:

if ($tuesday.length) {
   // Getting values of the checked checkboxes
   var values = $tuesday.map(function(){
        return this.value;
   }).get();
   // ...
} else {
    // There is no checked `day[]` checkbox
}

In case that you have other similar set of checkboxes you can use an array:

var days = ['days', 'in', 'a', 'week'],
    values = {},
    errors = [],
    $checkboxes = $("input[type=checkbox]");

$.each(days, function(_, day) {
  var $set = $checkboxes.filter('[name="'+day+'[]"]:checked');
  if ($set.length) {
      values[day] = $set.map(function() {
          return this.value;
      }).get();
  } else {
      // There is no checked `day[]` checkbox
      errors.push(day);
  }
});

if (errors.length) {
   // console.log('Please check at least one hour in ' + errors.join(', ') + ' days ...');
} else {
  // console.log(values);
}

Get value checkbox and push in array

First, you are using the wrong selector. You should change .form-check in the javascript to .form-check-input or .delete-checkbox. Also you can easily get values of the selected checkboxes using jquery's .map() method.

Change your javascript code to something like this

function multiple_delete(id) {
    const selected = $(".delete-checkbox:checked").map((i, el) => el.value).get();

    if (selected.length > 0) {
        $.ajax({
            url: "multiple-delete",
            type: "POST",
            data: selected.join(","),
            success: function (data) {
                if (data["success"]) {
                    alert(data["success"]);
                } else {
                    alert(data["error"]);
                    console.log(data);
                }
            },
            error: function (data) {
                alert(data.responseText);
            },
        });
    }
}

Jquery - get array of checkbox values

You can use the :checked selector and map() to create an array from a set of matched elements. Try this:

$(':checkbox').change(e => {
  let opts = $(":checkbox:checked").map((i, el) => el.value).get();
  console.log(opts);
});

/* alternative for IE support:
$(':checkbox').change(function() {
  var opts = $(":checkbox:checked").map(function() {
    return this.value;
  }).get();
  console.log(opts);
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="1">
    Toronto
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="3">
    New York
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="6">
    London
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="5">
    Paris
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="4">
    Berlin
  </li>
</ul>

How to collect values of checkboxes into Array in jQuery

try this script

     $(function () {
        function dumpInArray(){
           var arr = [];
           $('.modal-choices input[type="checkbox"]:checked').each(function(){
              arr.push($(this).val());
           });
           return arr; 
        }

        $('.select-roles').click(function () {
           dumpInArray();
        });
     });

it, upon click of "Done", selects all checked checkboxes in .select-roles and returns their values in an array

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">

---

Related Topics