how to pass checkbox values in an array to a function using onclick in javascript

Question

how to pass checkbox values in an array to a function using onclick in JavaScript. following is my html code. Note that I don't use form tag. only input tags are used.

 <input id="a"name="a" type="checkbox" value="1" checked="checked" >A</input>
 <input id="a"name="a" type="checkbox" value="2" checked="checked" >B</input>
 <input id="a"name="a" type="checkbox" value="3" checked="checked" >C</input>
<button onclick="send_query(????)">CLICK</button>

following is my JavaScript function

function send_query(check) {
var str = "";
    for (i = 0; i < check.length; i++) {

        if (check[i].checked == true) {
            str = str + check[i];
        }
 console.log(str);

}

Arun P Johny · Accepted Answer · 2013-10-23 12:32:34Z

3

You can write a onclick handler for the button, which can create an array of clicked checkbox values and then call the send_query with the parameter as shown below

<button onclick="onclickhandler()">CLICK</button>

then

function onclickhandler() {
    var check = $('input[name="a"]:checked').map(function () {
        return this.value;
    }).get();
    console.log(check);
    send_query(check)
}

Note: I would also recommend using jQuery to register the click handler instead of using inline onclick handler.

Note: Also ID of elements must be unique in a document... you have multiple elements with id a, I'm not seeing you using that id anywhere so you could probably remove it

edited Oct 23, 2013 at 12:32

answered Oct 23, 2013 at 11:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nikki Over a year ago

but iam passing another input value which is a text through the same call, so with that how can i pass this check box values

Johan Over a year ago

Don't forget .get() at the end.

Arun P Johny Over a year ago

@Johan yes... .get().join(',')

Johan Over a year ago

Yes, if he wants a string. Sounds to me like he wants an array, though.

Arun P Johny Over a year ago

@nikki then you write a onclick function where you do this then call the second function from this function

|

score 0 · Accepted Answer · 2013-10-23 17:30:43Z

0

With pure javascript (demo) (tested with Chrome only).

HTML :

<button onclick="send_query(document.getElementsByTagName('input'))">

Javascript :

function send_query(check) {
    var values = [];
    for (i = 0; i < check.length; i++) {
        if (check[i].checked == true) {
            values.push(check[i].value);
        }
    }
    console.log(values.join());
}

edited Oct 23, 2013 at 17:30

answered Oct 23, 2013 at 11:55

user1636522

Comments

Prateek · Accepted Answer · 2013-10-23 11:56:32Z

0

Try this

<form name="searchForm" action="">
    <input type="checkbox" name="categorySelect[]" id="1"/>
    <input type="checkbox" name="categorySelect[]" id="2" />
    <input type="checkbox" name="categorySelect[]" id="3"/>
    <input type="button" value="click" onclick="send_query();"/>
</form>

JS

function send_query() {
var check = document.getElementsByName('categorySelect[]');
var selectedRows = [];
for (var i = 0, l = check.length; i < l; i++) {
    if (check[i].checked) {
        selectedRows.push(check[i]);
    }
}

alert(selectedRows.length);
}

edited Oct 23, 2013 at 11:56

answered Oct 23, 2013 at 11:27

Prateek

6,9852 gold badges27 silver badges37 bronze badges

2 Comments

nikki Over a year ago

i need the onclick function to send the checkbox values to fuction as an array

Prateek Over a year ago

check new ans. I think you need this.

Collectives™ on Stack Overflow

how to pass checkbox values in an array to a function using onclick in javascript

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related