How can I get the value of checkboxes which are selected using jquery? My html code is as follows:
<input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />
This question is related to
jquery
Since u have the same class name against all check box, thus
$(".ads_Checkbox")
will give u all the checkboxes, and then you can iterate them using each loop like
$(".ads_Checkbox:checked").each(function(){
alert($(this).val());
});
Also you can use $('input[name="selector[]"]').serialize();. It returns URL encoded string like: "selector%5B%5D=1&selector%5B%5D=3"
try this one.. (guys I am a new bee.. so if I wrong then I am really sorry. But I found a solution by this way.)
var suggestion = [];
$('#health_condition_name:checked').each(function (j, ob) {
var odata = {
health_condition_name: $(ob).val()
};
health.push(odata);
});
Try getPrameterValues() for getting values from multiple checkboxes.
You may try;
$('#save_value').click(function(){
var final = '';
$('.ads_Checkbox:checked').each(function(){
var values = $(this).val();
final += values;
});
alert(final);
});
This will return all checkbox values in a single instance.
Here is a working Live Demo.
To get an array of values from multiple checked checkboxes, use jQuery map/get functions:
$('input[type=checkbox]:checked').map(function(_, el) {
return $(el).val();
}).get();
This will return array with checked values, like this one: ['1', '2']
Here is working example on jsfiddle: http://jsfiddle.net/7PV2e/
$(document).ready(function(){_x000D_
$(".chk").click(function(){_x000D_
var d = $("input[name=test]"); if(d.is(":checked")){_x000D_
//_x000D_
}_x000D_
});_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="checkbox" name="test"> `test1`_x000D_
<input type="checkbox" name="test"> `test2`_x000D_
<input type="checkbox" name="test"> `test3`_x000D_
<input type="button" value="check" class='chk'/>You can get them like this
$('#save_value').click(function() {
$('.ads_Checkbox:checked').each(function() {
alert($(this).val());
});
});
Try this, jQuery how to get multiple checkbox's value
$(document).ready(function() {_x000D_
$(".btn_click").click(function(){_x000D_
var test = new Array();_x000D_
$("input[name='programming']:checked").each(function() {_x000D_
test.push($(this).val());_x000D_
});_x000D_
_x000D_
alert("My favourite programming languages are: " + test);_x000D_
});_x000D_
});<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>jQuery Get Values of Selected Checboxes</title>_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> _x000D_
</head>_x000D_
<body>_x000D_
<form>_x000D_
<h3>Select your favorite Programming Languages :</h3>_x000D_
<label><input type="checkbox" value="PHP" name="programming"> PHP</label>_x000D_
<label><input type="checkbox" value="Java" name="programming"> Java</label>_x000D_
<label><input type="checkbox" value="Ruby" name="programming"> Ruby</label>_x000D_
<label><input type="checkbox" value="Python" name="programming"> Python</label>_x000D_
<label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label>_x000D_
<label><input type="checkbox" value="Rust" name="programming">Rust</label>_x000D_
<label><input type="checkbox" value="C" name="programming"> C</label>_x000D_
<br>_x000D_
<button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button>_x000D_
</form>_x000D_
</body>_x000D_
</html> You can do it like this,
$('.ads_Checkbox:checked')
You can iterate through them with each() and fill the array with checkedbox values.
To get the values of selected checkboxes in array
var i = 0;
$('#save_value').click(function () {
var arr = [];
$('.ads_Checkbox:checked').each(function () {
arr[i++] = $(this).val();
});
});
Edit, using .map()
You can also use jQuery.map with get() to get the array of selected checkboxe values.
As a side note using this.value instead of $(this).val() would give better performance.
$('#save_value').click(function(){
var arr = $('.ads_Checkbox:checked').map(function(){
return this.value;
}).get();
});
$('input:checked').map(function(i, e) {return e.value}).toArray();
Source: Stackoverflow.com