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
- Your selector is not correct.
- 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
How to Replace the Entire HTML Node Using Jquery
Why Can't We Have Return in the Ternary Operator
Getting How Many People Are in a Chat Room in Socket.Io
Firebase Callable Function + Cors
Access Microphone from a Browser - JavaScript
Why JavaScript Functions Always Return a Value
Create a File Using JavaScript in Chrome on Client Side
How to Import Image (.Svg, .Png ) in a React Component
Unsigned Integer in JavaScript
How to Completely Disable Any Mouse Click
How to Detect Right Mouse Click + Paste Using JavaScript
Get Content of a Div Using JavaScript
Get Element's CSS Selector (When It Doesn't Have an Id)
How to Prevent Simultaneous Logins of the Same User with Firebase