Submit multiple checkboxes values

Question

jquery:

(...)
$('#button_submit').click(function() 
{                           
func(check_box_values) 
});

html:

<form id="myForm">
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="1">opt1</label>
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="2">opt2</label>
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="3">opt3</label>
<input id='my_opt' type='hidden' name='my_opt[]' />
<input type="button" id="button_submit" value="go">
</form>

How could I pass this checked checkboxes values up there to use in func(check_box_values) ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

You can use the .map() method for that:

var check_box_values = $('#myForm [type="checkbox"]:checked').map(function () {
    return this.value;
}).get();

jsFiddle Demo

Explanation

$('#myForm [type="checkbox"]:checked') selects the elements that are descendants of #myForm, have a type attribute with the value checkbox, and are checked.
The .map() method iterates on the result elements, and the value that is returned in the function (which will be the value of the element, because here `this refers to the actual DOM element) is added to a collection.
In the end, .get() is used to convert the collection into a simple Javascript array.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 23, 2012 at 14:07

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

6 Comments

noneJavaScript Over a year ago

I forgot to say that I should be able to work with checkbox values further. Eg. if (check_box_values === 1) // something Is that possible with your solution ?

kapa Over a year ago

@skdnewbie The values will be collected into an array (named check_box_values). You can do anything with the array, like using jQuery's inArray() method on it to check if a certain value is in there. If the first two checkboxes are checked, the array will be [1,2] containing the values of the checked checkboxes.

noneJavaScript Over a year ago

surely you've realized that I'm beginner, so I will ask you, and im sorry, how can I get the array values then. And thanks, this is what i was looking for

kapa Over a year ago

@skdnewbie For example, to check if 2 is in the array, you would write if ($.inArray('2', check_box_values) > -1) { //it's fine } using $.inArray(). You can read about arrays on MDN for example, it's knowledge you cannot succeed without.

noneJavaScript Over a year ago

how difficult it is if I want to pass only the unchecked values?

|

Julian H. Lam · Accepted Answer · 2012-11-23 14:09:48Z

1

If you want all checkbox elements (not just the checked ones), try this. This doesn't use jQuery.

var formEl = document.getElementById('myForm'),
    inputs = formEl.getElementsByTagName('input'),
    numInputs = inputs.length,
    checkboxEls = [];

while(numInputs--) {
    if (inputs[numInputs].getAttribute('type') == 'checkbox') checkboxEls.push(inputs[numInputs]);
}

func(checkboxEls);

answered Nov 23, 2012 at 14:09

Julian H. Lam

26.3k13 gold badges51 silver badges74 bronze badges

Comments

Francis Cebu · Accepted Answer · 2012-11-23 14:35:59Z

0

you can use this code, if you want to get the value of the checkbox.

$("#button_submit").on("click",function(){
    $("#myForm input").each(function(){
         var Check = $('#chkSelect');
         if(Check.is(':checked') == true){
             func(Check.attr('value'));
         }
    });
});

this code will create a loop on the entire form and check if whether the check box is check or not, then call the func function in your code.

answered Nov 23, 2012 at 14:35

Francis Cebu

6171 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Submit multiple checkboxes values

3 Answers 3

Explanation

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Explanation

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related