Get values of checkbox using Ajax with a $.each

Question

A small question where I think I'm very close to the goal.

I am trying to retrieve the value of all checkboxes coming from an array that are checked in order to send these values to my controller. (This allows the user to select or not certain options).

I'm almost there, I just can not get the desired value in my int table.

I would like to put int in this int array the value '@ stuff.SubEvent_Zkp' but currently .val () puts 0 as a value in all the checkboxes sent to my controller (and also in the ajax call).

I still specify that # stuff.SubEvent_Zkp has a unique value.

I tried with data [0] and also with attr () but that does not seem to work.

Table with checkboxes

                <tbody>
                    @foreach (var stuff in Model._Registration_SubEvents)
                    {
                        <tr>
                            <td class="col-md-3">@stuff.SubEvent_Name</td>
                            <td class="col-md-1">@stuff.SubEvent_Date.ToShortDateString()</td>
                            <td>@stuff.SubEvent_Fee</td>
                            <td>@stuff.SubEvent_Note</td>
                            <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" id="CheckSub" value="@stuff.SubEvent_Zkp" /></td>
                        </tr>
                    }
                </tbody>

Code to put the values of @stuff.SubEvent_Zkp in favorite array

    $.each($("input[name='CheckSub']:checked"), function () {
        favorite.push($(this).val());
    });

And i put favorite in data (in the ajax call)

data: { Id: id, Status: status,Checkin: checkin, Checkout: checkout, Cost: cost, Terms: check1, Info: check2, values: favorite },

So what are the actual values you see in the rendered html? Really not clear what specific problem is here — charlietfl
– charlietfl, Commented Dec 7, 2018 at 13:21
Well the table contains multiples objects of _Registration_SubEvents. In this model i have an int SubEvent_Zkp (who is unique) and this is the value i want to pass in my controller. So what i did is a foreach to loop each checkbox who are checked and i need the values of SubEvent_Zkp. Actually i receive [0] as values for each checkbox who are checked. — Korpin
– Korpin, Commented Dec 7, 2018 at 13:24
Try .is("checked") or .prop("checked") instead of .val(). It should return true. api.jquery.com/prop — Shim-Sao
– Shim-Sao, Commented Dec 7, 2018 at 13:25
Did you look at the rendered html and see what is actually in each value attribute? Can inspect in browser dev tools elements inspector. Your each looks fine — charlietfl
– charlietfl, Commented Dec 7, 2018 at 13:32
I just notice that when i debug with Chrome, in each checkbox input i have id="0" value="0". So i guess i need to find a way to put the good value in value="" — Korpin
– Korpin, Commented Dec 7, 2018 at 13:36

GregH · Accepted Answer · 2018-12-07 13:54:43Z

2

Here's a simple use case I put together using data attributes that successfully retrieves all data attribute values from checkboxes and pushes them to an array (I'm using data attributes here because they seem to more aptly represent what you're trying to use the value attribute for):

         <table>
            <tr>
                <td class="col-md-3">name</td>
                <td class="col-md-1">date</td>
                <td>fee</td>
                <td>note</td>
                <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="1"  /></td>
            </tr>
            <tr>
                <td class="col-md-3">name</td>
                <td class="col-md-1">date</td>
                <td>fee</td>
                <td>note</td>
                <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="2" /></td>
            </tr>
        </table>

script:

var array = [];
$.each($("input[name='CheckSub']"), function () {
    array.push($(this).data("checksub"));
});
//array now contains values 1 and 2

so your table row would look like:

<tr>
    <td class="col-md-3">@stuff.SubEvent_Name</td>
    <td class="col-md-1">@stuff.SubEvent_Date.ToShortDateString()</td>
    <td>@stuff.SubEvent_Fee</td>
    <td>@stuff.SubEvent_Note</td>
    <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="@stuff.SubEvent_Zkp"/></td>
</tr>

Additionally, ensure that the rendered values on your page are not all 0!

edited Dec 7, 2018 at 13:54

answered Dec 7, 2018 at 13:38

GregH

5,53112 gold badges62 silver badges115 bronze badges

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

1 Comment

Korpin Over a year ago

Thanks for your help it works! Actually i think my code was also working but i forgot to bring back the value of @stuf.SubEvent_Zkp from my DB.. This is why i had 0 values

Pavel · Accepted Answer · 2018-12-07 13:30:32Z

0

Id should be unique. Try following:

... id="@stuff.SubEvent_Zkp" value="@stuff.SubEvent_Zkp"...

answered Dec 7, 2018 at 13:30

Pavel

113 bronze badges

1 Comment

charlietfl Over a year ago

This won't account for OP's issue though and would actually be better to use common class instead

Collectives™ on Stack Overflow

Get values of checkbox using Ajax with a $.each

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related