CODEWITHSUNDEEP
javascriptjqueryhtml
nikki
nikki

Reputation: 373

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

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);

}

Upvotes: 0

Views: 6700

Answers (3)

user1636522
user1636522

Reputation:

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());
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

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

Upvotes: 3

Prateek
Prateek

Reputation: 6965

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);
}

Upvotes: 0

Related Questions