jQuery: Show/Hide based on Radio Boxes from an array
<p>I setup two arrays: 1) the class names and the value names 2) the HTML fields that are being effected: such as li, divs etc... </p>

<p>Basically I setup everything to use classes instead of ID's because the # is a coldfusion veriable/function marker which throws up a CFML error. I put everything into arrays to recude the number of $.change(functions) I had to write. </p>

<p>First issue: only 2 fields are getting hidden. 
Second issue: when you click on a radio box, nothing shows up. </p>

<p>Any suggestions? </p>

<p>Code: </p>

<pre><code>                &lt;!--- An array of the radio boxes |
                    It's a collection of the class="" of the radio boxes
                    and their values. We're going to loop over this to 
                    show/hide fields for the array below. 
                 ---&gt;
                var classArray = new Array(
                    "appliedWorkedYes",
                    "workStudyYes",
                    "workHistoryYes",
                    "workWeekEndsYes",
                    "cprYes",
                    "aedYes",
                    "aidYes"
                    ); 
                &lt;!--- An array of the radio boxes extra fields, these will be hidden
                    It's a collection of HTML elements such as span or li that have the
                    class name of each in the array. the idea is on load they will be hidden
                    when you select yes on a radio box they will appear with their extra details.
                 ---&gt; 
                var classFieldArray = new Array(
                    "appliedWorkedYesHide",
                    "workStudyYesHide",
                    "workHistoryYesHide",
                    "workWeekEndsYesHide",
                    "cprYesHide",
                    "aedYesHide",
                    "aidYesHide"                            
                    )                           

        $(document).ready(function() {
                // looping over the class name
                for(var i = 0; i &lt; classArray.length; i++){
                    var fName = classFieldArray[i];
                    var cName = classArray[i];

                        // hiding the fields until selected
                        $("."+fName).css("display","none"); 
                        // the jQuery fu that shows the fields 
                        $("radio[@name=''+cName]").change(function(){
                            if ($("radio[@name=''+cName]:checked").val() == ''+cName)
                                $('.'+fName).show("fast");
                            });
                    }
        });
</code></pre>
