How to pass checkbox values into an array using jQuery?

Question

I am have the below checkboxes and I want to pass the checked values to an array so that I can do an ajax post. However, I am hitting an error and I am not sure where I went wrong... How do I pass the values into the array and how do I retrieve them?

HTML

<input type="checkbox"  name="newCheckboxes" value="1"  />
<input type="checkbox"  name="newCheckboxes" value="2"  />
<input type="checkbox"  name="newCheckboxes" value="3"  />

Script (not working)

 var allFields = $( [] );
 $("#newCheckboxes:checked").each(function() {
         allFields.add( $(this).val() );
 });

 $.ajax(
      {
        type:"POST",
        url: "PostedHere",
        data:{
             checkedValues: allFields

              }
         });

karim79 · Accepted Answer · 2011-08-04 04:32:17Z

1

You only need:

$.ajax({
    type:"POST",
    url: "PostedHere",
    data: { checkedValues: $("#newCheckboxes:checked").serialize() } 
});
// checkedValues: "newCheckboxes=1&newCheckboxes=2" etc..

answered Aug 4, 2011 at 4:32

karim79

343k67 gold badges420 silver badges409 bronze badges

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

1 Comment

newtodatatables Over a year ago

Thank you for your help. I cant seem to retrieve it at my servlet "PostedHere". I used String checkedValues= (String) request.getParameter("checkedValues"); Is this the right way?

Jose Adrian · Accepted Answer · 2011-08-04 04:37:35Z

0

Using karim79 code idea:

$.post('URL', $('[name="newCheckboxes"]:checked').serializeArray(), function(data){
  //data
});

answered Aug 4, 2011 at 4:37

Jose Adrian

1,2371 gold badge17 silver badges32 bronze badges

1 Comment

newtodatatables Over a year ago

any idea how i can extract out the info at my URL?

Amir978 · Accepted Answer · 2011-08-04 05:12:13Z

What I prefer to do is: Create a new Object and add all checkboxes 'Value' and 'Ischecked' to an array (access), then pass it to page by Json:

 $(document).ready(function () {
                    $("#btnSave").click(function () {
                         event.preventDefault();
                         $("#newCheckboxes").each(function () {
                         var data= new Object()
                         var access = new Array();
                         access.ChValue = $(this).attr("value");
                    if ($(this).attr("checked") == "checked") access.ChChecked = true;
                    data.push(access);
                });

 $.ajax({
                type: 'POST',
                url: '@Url.Content("~/URLofPage")',
                data: $.json.encode(data),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8'

            });
});
});

please do not forgot to add Json reference to your page:

<script src="../../../Scripts/jquery.json.js" type="text/javascript"></script>

Collectives™ on Stack Overflow

How to pass checkbox values into an array using jQuery?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related