pmingione Posted January 11, 2013 Share Posted January 11, 2013 Hi All,I'm sure this is a relatively simple problem. I hope someone with more javaScript knowledge than me can solve it. I need to be able to iterate with a for-loop over all of the input check-boxes in this table row to determine if any are checked. <tr id="hurricane_damage"><td valign="top" width="183"><span id="label_courses">What type of damage did your business incur as a result of Hurricane Sandy? Please check all that apply:*</span></td><td valign="top" colspan="2" width="366"><div><input id="subform_hurricane_damage_1" type="checkbox" value="Fire" name="Huricane Damage"/><span><b>Fire</b></span></div><div><input id="subform_hurricane_damage_2" type="checkbox" value="Flooding"/><span><b>Flooding</b></span></div><div><input id="subform_hurricane_damage_3" type="checkbox" value="Wind Damage"/><span><b>Wind Damage</b></span></div><div><input id="subform_hurricane_damage_4" type="checkbox" value="Inventory Loss"/><span><b>Inventory Loss</b></span></div><div><input id="subform_hurricane_damage_5" type="checkbox" value="Other" onclick="showHideOther()"/><span><b>Other</b></span></div><span id="hurricane_damage_errMsg" class="hide">Please choose at least one category.</span></td></tr> My problem is I don't know how to detect the number of check-boxes in the table row so that the for loop can terminate. (Each table row in the form will not necessarily have the same number of check boxes.)i.e.for(var i = 0; i == number_of_check_boxes; i++) Either a javaScript or a jQuery solution would be acceptable.Thanks in advance. Link to comment Share on other sites More sharing options...
jeffman Posted January 11, 2013 Share Posted January 11, 2013 (edited) var inputs = document.getElementById("hurricane_damage").getElementsByTagName("input"); That will get you a collection of all inputs that are descendants of #hurricane_damage. Loop through that. Note that if you have other kinds of inputs, you'll have to test the type attribute to be sure you examine only checkboxes. Edited January 11, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
justsomeguy Posted January 11, 2013 Share Posted January 11, 2013 You can use getElementsByTagName to get all inputs. If there are other inputs then you can check the type to make sure they're checkboxes. var tr = document.getElementById('hurricane_damage');var inputs = tr.getElementsByTagName('input');var str;for (var i = 0; i < inputs.length; i++){ if (inputs[i].type == 'checkbox') { str = 'checkbox ' + inputs[i].id + ' is ' + (inputs[i].checked ? 'checked' : 'not checked'); alert(str); }} Link to comment Share on other sites More sharing options...
jeffman Posted January 11, 2013 Share Posted January 11, 2013 Great minds. Link to comment Share on other sites More sharing options...
pmingione Posted January 11, 2013 Author Share Posted January 11, 2013 Thanks to all of the "GREAT MINDS" that solved my problem. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2013 Share Posted January 12, 2013 Use form elements collection, you are not then restricted to form elements of tag name 'input' <!DOCTYPE html><html><body><form id="frm1" action="form_action.asp"> First name: <input type="text" name="fname" value="Donald"><br> Last name: <input type="text" name="lname" value="Duck"><br><div><input id="subform_hurricane_damage_1" type="checkbox" value="Fire" name="Huricane Damage"/><span><b>Fire</b></span></div><div><input id="subform_hurricane_damage_2" type="checkbox" value="Flooding"/><span><b>Flooding</b></span></div><div><input id="subform_hurricane_damage_3" type="checkbox" checked="checked" value="Wind Damage"/><span><b>Wind Damage</b></span></div><div><input id="subform_hurricane_damage_4" type="checkbox" checked="checked" value="Inventory Loss"/><span><b>Inventory Loss</b></span></div><div><input id="subform_hurricane_damage_5" type="checkbox" value="Other" onclick="showHideOther()"/><span><b>Other</b></span></div><select name="selectelem"><option value="value1">value 1</option><option value="value2" selected="selected">value 2</option><option value="value3">value 3</option></select><textarea name="textareaelem">this is the textarea value</textarea> <input type="submit" value="Submit"></form><p>Return the value of each element in the form:</p><script>var x=document.getElementById("frm1");var inputs = x.getElementsByTagName('input'); document.write("<h3>By Form Elements Collection</h3>");for (var i=0;i<x.length;i++) {if(x.elements[i].checked && x.elements[i].type == "checkbox"){ document.write(x.elements[i].value+" checked"); document.write("<br>");}else{ document.write(x.elements[i].value); document.write("<br>");} }document.write("<hr>"); document.write("<h3>getElementsByTagName</h3>");for (var i=0;i<inputs.length;i++) {if(inputs[i].checked && inputs[i].type == "checkbox"){ document.write(inputs[i].value+" checked"); document.write("<br>");}else{ document.write(inputs[i].value); document.write("<br>");} }</script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now