How can I iterate over all 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> 

They are created dynamically.

And the form that is at the bottom of the page outside the area with the above lines:

 <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 lines have been created, I need the event to click the form button, look at each checkbox, and then call the javascript function with the identifier and the value SelectedAnswer for each checkbox set.

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

Is this what I can do 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

 $('input[type=checkbox]:checked').each(function() { // Do something interesting }); 

Answer 3

You need to add the class to your checkboxes. After that, use the jQuery .each() method, for example:

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 fiddle (code above). I just implemented the delete option (not very good), but I use the value variable to check which option is selected. If you want this to happen before submitting the form, delete the line e.preventDefault() .

Answer 4

Of course.

The first thing you want to do is bind the event handler to your submit event on the form using the $.submit() handler. Then you need to iterate over each of the marked 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 want to submit your form or not.

As 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; }