In a div, I have some checkbox. I'd like when I push a button get all the name of all check box checked. Could you tell me how to do this ?
<div id="MyDiv">
....
<td><%= Html.CheckBox("need_" + item.Id.ToString())%></td>
...
</div>
Thanks,
This question is related to
javascript
jquery
$(document).ready(function() {
$('#someButton').click(function() {
var names = [];
$('#MyDiv input:checked').each(function() {
names.push(this.name);
});
// now names contains all of the names of checked checkboxes
// do something with it
});
});
Since nobody has mentioned this..
If all you want is an array of values, an easier alternative would be to use the .map()
method. Just remember to call .get()
to convert the jQuery object to an array:
var names = $('.parent input:checked').map(function () {
return this.name;
}).get();
console.log(names);
var names = $('.parent input:checked').map(function () {_x000D_
return this.name;_x000D_
}).get();_x000D_
_x000D_
console.log(names);
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="parent">_x000D_
<input type="checkbox" name="name1" />_x000D_
<input type="checkbox" name="name2" />_x000D_
<input type="checkbox" name="name3" checked="checked" />_x000D_
<input type="checkbox" name="name4" checked="checked" />_x000D_
<input type="checkbox" name="name5" />_x000D_
</div>
_x000D_
Pure JavaScript:
var elements = document.querySelectorAll('.parent input:checked');
var names = Array.prototype.map.call(elements, function(el, i) {
return el.name;
});
console.log(names);
var elements = document.querySelectorAll('.parent input:checked');_x000D_
var names = Array.prototype.map.call(elements, function(el, i){_x000D_
return el.name;_x000D_
});_x000D_
_x000D_
console.log(names);
_x000D_
<div class="parent">_x000D_
<input type="checkbox" name="name1" />_x000D_
<input type="checkbox" name="name2" />_x000D_
<input type="checkbox" name="name3" checked="checked" />_x000D_
<input type="checkbox" name="name4" checked="checked" />_x000D_
<input type="checkbox" name="name5" />_x000D_
</div>
_x000D_
var nameCheckBoxList = "myCheckListName";
var selectedValues = $("[name=" + nameCheckBoxList + "]:checked").map(function(){return this.value;});
You should use map for this.
$('input[type=checkbox]:checked').map(function(i, e) {
return $(e).val();
});
Not tested but should work:
$("#MyDiv td input:checked").each(function()
{
alert($(this).attr("id"));
});
Try this one..
var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
console.log($(this).val());
listCheck .push($(this).val());
});
console.log(listCheck);
You can try this...
$(document).ready(function() {
$("button").click(function(){
var checkBoxValues = [];
$.each($("input[name='check_name']:checked"), function(){
checkBoxValues.push($(this).val());
});
console.log(checkBoxValues);
});
});
var aArray = [];
window.$( "#myDiv" ).find( "input[type=checkbox][checked]" ).each( function()
{
aArray.push( this.name );
});
You can put it in a function and execute on click of the button.
Source: Stackoverflow.com