Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 5 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Using jQuery Arrays

Using jQuery to push checkbox items into a JavaScript array

AshleyAshley

I was recently in a situation where I needed to count a number of list items and pass the values to a form, I got around this problem by using JavaScript arrays, looping through the list items and picking up one of the attributes. I’ve created a demo page to show an example of this here. Lets run through the code. We start with our dom ready function which has two click functions one function toggles a class which is either added or removed from a checkbox that is clicked and the second function is triggered when you click the submit button, this function loops through each element that has the ‘selected’ class then pushes the value into the array.

The Code


$(document).ready(function() {

$("input").click(function () {

$(this).toggleClass('selected');

});

// on submit check selected class for a value
$(".submit").click(function () {

var itemsarray = [];

$("#list li .selected").each(function () {

var items = $(this).attr('value');
itemsarray.push(items);

});

// this is where we could process the array or POST it with AJAX
alert(itemsarray);

});

});

The HTML


<ul id="list">
<li><input value="Advertising" type="checkbox" class=""/> Advertising</li>
<li><input value="Art" type="checkbox" class=""/> Art</li>
<li><input value="Automotive" type="checkbox" class=""/> Automotive</li>
<li><input value="Business" type="checkbox" class=""/> Business</li>
<li><input value="Celebrity" type="checkbox" class=""/> Celebrity</li>
<li><input value="Comedian" type="checkbox" class="" /> Comedian</li>
<li><input value="Education" type="checkbox" class=""/> Education</li>
<li><input value="Entertainment" type="checkbox" class=""/> Entertainment</li>
<li><input value="Family" type="checkbox" class=""/> Family</li>
<li><input value="Fashion" type="checkbox" class=""/> Fashion</li>
<li><input value="Film" type="checkbox" class=""/> Film</li>
<div class="clear"></div>
</ul>

<div class="submit">Submit</div>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 10
  • Lyubomir Marinov
    Posted on

    Lyubomir Marinov Lyubomir Marinov

    Reply Author

    $.toggleClass is not working under IE6. So the best approach is using the :checked selector :)

    P.S. sorry for writing 2 years after the post, just got here by accident 😀


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      No problem. I’m more stunned that you’re supporting browser degradation for IE6!

      :)

      Ashley


  • pomeh
    Posted on

    pomeh pomeh

    Reply Author

    Why not use jQuery.fn.serializeArray method ? Or just the map method ? Take a look http://jsfiddle.net/HfdDE/1/


  • Christian
    Posted on

    Christian Christian

    Reply Author

    In this specific case I don’t understand why you’re using the toggleClass method. I would just use the “:checked” selector in this case.

    Have a peek at http://jsfiddle.net/GHbjm/


  • Gijs Van Zon
    Posted on

    Gijs Van Zon Gijs Van Zon

    Reply Author

    I would put a form around it with an id attribute. On submit of the form, prevent the default submission with $.preventDefault();. Loop through the checkboxes ($(this).attr(‘checked’)) with the form as the context (this way saving more DOM requests) and put the val() attribute in an array. This way you can check with Javascript and if all is good, submit the form to save in the database by normal submit or AJAX request.


  • Vinicius Almeida
    Posted on

    Vinicius Almeida Vinicius Almeida

    Reply Author

    Excellent post!

    I would like to taste as you set the comma as separator items.

    tnks!


  • julio_menendez
    Posted on

    julio_menendez julio_menendez

    Reply Author

    Actually, a faster way will be without the binding of the inputs and using the :checked selector to get all the inputs checked.

    This simple line replaces all your loop and binding of the inputs and its faster too:
    $(‘#list li input:checked’)


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    Interesting indeed.

    I would have rather gone for no-bind on the inputs but an actual checkbox value test in the each loop on the .submit click.

    Has to loop & test every checkbox, but less binds on DOM load.

    Do you know what’s best & why ?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @rohnn interesting. not sure which method is best.