How to insert value of checked checkbox in array using jQuery - javascript

I want select all input values that is checked and has name DisbursementUnitCodes
$('input:checked[name=DisbursementUnitCodes]').val()
This code give the first element value but i want give all input value to list or array.

Use .each() to iterating selected elements and get value of its.
var arr = [];
$("input:checked[name=DisbursementUnitCodes]").each(function(){
arr.push($(this).val());
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="DisbursementUnitCodes" value ="A" checked />
<input type="checkbox" name="DisbursementUnitCodes" value ="B" />
<input type="checkbox" name="DisbursementUnitCodes" value ="C" checked />
<input type="checkbox" name="other" value ="D" checked />
<input type="checkbox" name="other" value ="E" />

.val() gives you value of first element in selection. If you want all values in array, you should use .map() like this:
var values = $('input:checked[name=DisbursementUnitCodes]').map(function() {
return $(this).val();
}).get();

Related

Unchecked input checkbox with identical ids

I'm trying to get the values of an input of type checkbox with the same ID, and try to get the click (the checked), to the one with the value 1
but when I do the console.log I only get the value of the first input and it does not get both values.
i.e. to bring me the value number 2 of the first one and not 2 and 1.
<script>
var s = document.getElementById("switchA").value;
console.log(s);
</script>
These inputs are of checkbox type so if one of them has value two it should be unchecked.
<input type="checkbox" name="asd" id="switchA" value="2">
<input type="checkbox" name="asdf" id="switchA" value="1">
You shouldn't be giving the same id to multiple elements on a page. However, assuming you are not able to change the HTML, you can use the following to select multiple elements with the same id:
var s = document.querySelectorAll("[id='switchA']");
You should use a name or class instead to group the checkboxes. Ids are meant to be unique in a document.
const vals = [...document.querySelectorAll('input[type=checkbox][name=someName]')]
.map(x => x.value);
console.log(vals);
<input type="checkbox" name="someName" value="2">
<input type="checkbox" name="someName" value="1">
However, you could use an attribute selector to obtain all elements with a specific id, but that is not recommended.
const vals = [...document.querySelectorAll("[id=switchA]")]
.map(x => x.value);
console.log(vals);
<input type="checkbox" name="asd" id="switchA" value="2">
<input type="checkbox" name="asdf" id="switchA" value="1">

Javascript, form, checkbox results into an array

I am trying to get the results from a form - in particular a multicheckbox.
So I want to get the results as a simple array
[2,4,6,5,7]
I've tried these -
$('.ids:checked').serialize()
$('.ids:checked').serializeArray()
Use jQuery map() method to generate the collection and get it as an array using get() method.
$('.ids:checked').map(function(){
// return the value, which would be the collection element
return this.value;
// get it as an array
}).get()
$("button").click(function() {
console.log($('input:checked').map(function() {
return this.value;
}).get());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="bla1" value="something1">
<input type="checkbox" name="bla2" value="something2">
<input type="checkbox" name="bla3" value="something3">
<input type="checkbox" name="bla4" value="something4">
<input type="checkbox" name="bla5" value="something5">
<input type="checkbox" name="bla6" value="something6">
</form>
<button>
Click
</button>
Or use jQuery.map() method to iterate and generate array where first argument in callback refers to the element.
$.map($('.ids:checked'),function(ele){
// return the value, which would be the array element
return ele.value;
});
$("button").click(function() {
console.log($.map($('input:checked'), function(ele) {
return ele.value;
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="bla1" value="something1">
<input type="checkbox" name="bla2" value="something2">
<input type="checkbox" name="bla3" value="something3">
<input type="checkbox" name="bla4" value="something4">
<input type="checkbox" name="bla5" value="something5">
<input type="checkbox" name="bla6" value="something6">
</form>
<button>
Click
</button>
var myArray = Array.prototype.map.call($('.ids:checked'), function(item){return item.value;});
use the core js array map method and binds it to your jquery object

Javascript: How can I get all value of selected checked checkboxes, push to an array then put in in a input HTML element?

I have a list of 50 checkboxes. If users check some of them, how can I get all values of the selected ones and push them into an array then place it in a hidden text element?
Can I use the same name for all checkboxes? or I must use different name for each of them?
<input type="checkbox" name="bulk_id[]" value="1"/>
<input type="checkbox" name="bulk_id[]" value="2"/>
<input type="checkbox" name="bulk_id[]" value="3"/>
<input type="checkbox" name="bulk_id[]" value="4"/>
<input type="checkbox" name="bulk_id[]" value="5"/>
...
Thank you.
You tagged your question with jquery, so i'll assume you are using it.
You select checkbox with input[type=checkbox] and use the subclass :checked to filter checked ones
1- get all checked boxes in an array
var selectedValues =[]
$('input[type=checkbox]:checked').each(function(i,e){
selectedValues.push( $(e).attr('value') )
})
2- append the content of this array in a hidden input (separated by ,)
$('#yourhiddenID').val( selectedValues.join(',') );
In this solution the name of your checkboxes does not matter.
Put your checkboxes in a container for a better selection :
$('#yourCheckboxContainerID input[type=checkbox]:checked')
so you have to get all checkboxes you have
var checkboxes = document.getElementsByName("bulk_id[]");
var arrayVal = [];
for (var i= 0; i<checkboxes.length;i++)
{
if (checkboxes[i].checked === true)
{
arrayVal.push(checkboxes[i].value);
}
}

check if checkbox is checked add value else if unchecked remove value

I have checkbox html.
<label><input type="checkbox"><span>Air Conditioning</span></label>
<label><input type="checkbox"><span>Cable TV Service</span></label>
<label><input type="checkbox"><span>Private Bathroom</span></label>
I need to have seperate value for each checkbox, so I can get those values from all and store in variable. For example
<label><input type="checkbox" data="1"><span>Air Conditioning</span></label>
<label><input type="checkbox" data="2"><span>Cable TV Service</span></label>
<label><input type="checkbox" data="3"><span>Private Bathroom</span></label>
So if all the 3 are selected I will need my variable as
room_features = '1-2-3';
If any one is then unchecked, variable will be updated as
room_features = '2-3';
So on every change on checkbox, variable should be updated. I am confused if either adding data="1" etc is fine for checkboxes? I normally do for anchors when there is single double quotes.
Live Demo
You should use value in each checkbox. for ex:
HTML:
<input type="checkbox" value="1" checked />
<input type="checkbox" value="2" checked />
<input type="checkbox" value="3" />
JQuery:
var searchIDs = $("input:checkbox:checked").map(function(){
return this.value;
}).toArray();
html
<label><input type="checkbox" checked="checked" data="1"><span>Air Conditioning</span></label>
<label><input type="checkbox" checked="checked" data="2"><span>Cable TV Service</span></label>
<label><input type="checkbox" data="3"><span>Private Bathroom</span></label>
JS
var selectedvalue=[];
$(":checkbox:checked").each(function(){
selectedvalue.push($(this).attr("data"));
});
alert(selectedvalue.join("-"));// your desired result
demo
reference Arrays and checked-selector
You can use .map() method, note that I have added value attribute to the element instead of data as an input should have a value otherwise what's the point of using it? If you want to use data-* attributes, you should specify an identifier. Something like <input type="checkbox" data-id="1">, then you can get the value using jQuery data() method: $(elem).data('id');.
<label><input type="checkbox" value="1"><span>Air Conditioning</span></label>
...
var vals = $('input[type=checkbox]:checked').map(function(){
return this.value; // return $(this).data('whatever');
}).get().join('-');
get() returns an array, if you need an array you can remove the .join() method which returns a string.
try this dynamic one
var room_features = "";
$('[type=checkbox]').change(function () {
var data = "-" + $(this).attr('data');
if (room_features.indexOf(data) != -1) {
room_features = room_features.replace(data, "");
alert(room_features);
} else {
room_features = room_features + data;
alert(room_features);
}
});
Demo Fiddle
javascript
getElementById("chkbox1").checked=true;
jquery
$("#chkbox1").prop("checked");
or
$("#chkbox1").attr("checked");
check this Jsfiddle
$("#btn").click(function(event){
var selectedvalue=[];
$(":checkbox:checked").each(function(){
selectedvalue.push($(this).attr("data"));
});
alert(selectedvalue.join("-"));// your desired result
})

Can't get second radio button selected value

I have two pair of Radio Button. One pair for Gender and other for User type.
My problem is I cant get the selected value of second pair of Radio button that is User type.
Only get the selected value of first pair of radio button that is Gender.
Can u help me?
$('input:radio[name=user[user_type_id]]:checked').val();
$('input:radio[name=user[gender]]:checked').val();
Check jQuery(':radio') Selector
If you use val() then it will not give value of the input:checked, it will return on or off only. To get get value of the radio button use the use the attr method:
//Html
<div>
<input type="radio" name="gender" value="Male"/>
<input type="radio" name="gender" value="Female" /></div>
<div>
<input type="radio" name="user" value="admin"/>
<input type="radio" name="user" value="user" />
</div>
<input type="button" id="clickMe" value ="Click Me" />
//js
$('#clickMe').click(function(){
alert($('input[name=gender]:radio:checked').attr('value'));
alert($('input[name=user]:radio:checked').attr('value'));
});
Ref:
Get attribute name value of <input>
jquery get attribute value when property is not set
Check this jsFiddle example

Categories

Resources