Foreach loop on dynamic number of checkboxes, get name

Question

So I have this concept (which I'm open to the possibility of it being a bad concept) to loop through a dynamic number of checkboxes and take the name of each checkbox that has been selected and push it to a hidden text field on my form so that the values of the names of those checkboxes that have been selected can be used elsewhere in my application. However, being somewhat new to JQuery I'm not sure if this can be done or how it can be done. This is what I've got so far with my research:

Relevant JQuery:

    $('#saveButton').click(function () {

      $('checkbox').each(function () {
          if ($(this).is(':checked')) {
              $('#hiddenDate').append($(this).text());
          }
      });
   });

Relevant View code:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm("SaveExit", "User", new { }, FormMethod.Post, new { id = "selectExitPoints" }))    { %>
    <fieldset>
        <div class="title center xl">Event&nbsp;Exit&nbsp;Selection&nbsp;</div>
        <table class="data-table">
        <%var odd = true; %>
        <%foreach (var log in Model.Log.OrderBy(s => s.DateEntered))
        { %>
            <tr class="row_<%=(odd ? "odd" : "even")%>">
                <td><input class="skill-checkbox" name="<%=log.DateEntered%>" type="checkbox" /></td>
                <td><span class="skill-text"><%= log.DateEntered%></span></td>
                <td><span class="skill-text"><%= log.EntryAccessPoint %></span></td>
            </tr>
            <%odd = !odd;%>
        <% } %>
        </table>
        <input type="hidden" id="hiddenDate" />
    </fieldset>
<% } %>

Can anybody point me in the right direction?

If a user clicks a checkbox on and off repeatedly, that hiddenDate is going to get really long. — Blazemonger
– Blazemonger, Commented May 29, 2013 at 17:56
$('checkbox') should be $(':checkbox') or, better yet, $('[type=checkbox]') — Blazemonger
– Blazemonger, Commented May 29, 2013 at 17:57
That's why I put that particular function within the save function -- so that hiddenDate only gets filled once when the user gets directed away from the page as the save function will also perform a redirect — Jfabs
– Jfabs, Commented May 29, 2013 at 17:57
@Blazemonger that produces the following error: 'TypeError: Object [type=checkbox] has no method 'each'' — Jfabs
– Jfabs, Commented May 29, 2013 at 18:02

Karl-André Gagnon · Accepted Answer · 2013-05-29 18:01:31Z

2

You could use jQuery .map(). Just like that :

var values = $.map($(':checkbox:checked'), function(el){
    return $(el).prop('name');
})
$('input').val(values.join(','));

answered May 29, 2013 at 18:01

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

2 Comments

Jfabs Over a year ago

with my version of JQuery which I can't recall right now this worked by changing .prop to .attr so thank you!

Karl-André Gagnon Over a year ago

Yeah prop is for jquery >1.6, atleast you figured the problem!

Collectives™ on Stack Overflow

Foreach loop on dynamic number of checkboxes, get name

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related