How can I iterate through all my checked checkboxes?

Question

My site has the following:

<td><input id="inp_0001010030" type="checkbox"></td>
<td><input id="inp_0001010031" type="checkbox"></td>
<td><input id="inp_0001010032" type="checkbox"></td>
<td><input id="inp_0001010033" type="checkbox"></td>
<td><input id="inp_0001010034" type="checkbox"></td>

These are created dynamically.

And a form that's at the bottom of the page outside of the area with the above rows:

<form action="??" method="??" >
   <input value="Action"  type="submit">
      <select id="SelectedAction" >
        <option value="1">Delete</option>
        <option value="2">Move</option>
      </select>
</form>

After the rows have been created I need to have the clicked event the form button go look at each checkbox and then call a javascript function with the id and the value of SelectedAnswer for each checkbox that it finds checked.

Note that if there is a way to do this without the form then it's even better. I just don't know enough about jQuery.

Is this the kind of thing I can do easily with jQuery?

Answer 1

$("input[type=submit]").click(function () {
    var answer = $("#SelectedAnswer").val();
    $("input:checked").each(function () {
        var id = $(this).attr("id");
        alert("Do something for: " + id + ", " + answer);
    });
});

Answer 2

Definitely.

The first thing you want to do is bind an event handler to your submit event on the form using the $.submit() handler. Next you'll want to iterate over each of the checked input elements:

$('form').submit(function() {
    var action = $('#SelectedAction option:selected', this).val();
    $('table input:checkbox:checked').each(function(i){
       return doMyCustomFunction(this, action);
    });
}

Your custom function ("doMyCustomFunction()" in my example) should return either true or false depending on whether you wanted to submit your form or not.

By way of a practical example, it might look something like this:

function doMyCustomFunction(el, formAction) {
   console.info('The element ID is ' + el.id + ' and the action is ' + formAction);
   return true;
}

Answer 3

You'll need to add a class to your checkboxes. After that, use jQuery's .each() method like this:

HTML

<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">

jQuery

$(document).ready(function()
{
    $("form input[type='submit']").click(function(e)
    {
        e.preventDefault();

        // This gets the value of the currently selected option
        var value = $(this).children(":selected").val();

        $(".list").each(function()
        {
            if($(this).is(':checked'))
            {
                $(this).fadeOut();
                // Do stuff with checked box
            }
            else
            {
                // Checkbox isn't checked
            }
        })
    });
});

EDIT

Please see this fiddle (code above). I've only implemented the delete option (not very well), but use the value variable to check which option is being selected. If you want this to happen before the form is submitted, remove the e.preventDefault() line.