The Issue:
I have the following form:
<form id="form_name" ...>
<input type="radio" name="type[value]" value="GroupA" />
<input type="radio" name="type[value]" value="GroupB" checked="checked" />
<input type="radio" name="type[value]" value="GroupC" />
<input type="radio" name="type[value]" value="GroupD" />
<input type="radio" name="type[value]" value="GroupE" />
</form>
I’m trying to loop over each radio to determine if one of the first two inputs (GroupA or GroupB) has the checked attribute with “checked” as its values, regardless of whether it’s before or after page-load. So, I need this logic to occur during page load as well as after the page has loaded to check if someone changes the value. Pretty straightforward (I hope).
Here’s what I have so far:
$("form#form_name input:radio").each(function(){
$(":radio[value=GroupA]").click(function(){
$("fieldset.group-manual-entry.collapsible").css('display','block');
alert('Group A');
return;
});
$(":radio[value=GroupB]").click(function(){
$("fieldset.group-manual-entry.collapsible").css('display','block');
alert('Group B');
return;
});
return false;
});
I’ve been told that it’s bad practice to use “return false;” on a listener, but I’m not even sure if what I have IS a listener, let alone whether it’s bad to do. It seems to break me out of the loop, so it seems to work for me. The more obvious problem, however, is that the alert doesn’t fire when the page is refreshed / loaded up. It works fine if someone changes the value thereafter though…
My Questions:
1.) If a space exists between words in the value attribute within markup of any of the radio buttons, should I encapsulate this in double-quotes when referencing it within the jQuery? (i.e. - if one of the radio buttons has “Group A” instead of “GroupA”, should this be encapsulated like “Group A” or instead like ‘Group A’–or maybe no quotes at all?)
2.) How can I make this work regardless of state? (I.e. - at page-load and after page-load.)
3.) Does the looping logic appear to be correct?
Thanks in advance.