Question

My code works beautfiully it shows when I need it to show and hides when I need it to go away. The idea here is that when using the form the person who is using it can check a box, see more required form data for what they just checked, it makes those fields required, and when that user unchecks the box it goes away.

The only problem is when a user clicks radio box within the group but the radio box does not have the correct value to show the container container (ex my false condition) jQuery will very quick show the box, then hide it again. Is there a way within my code to keep the box hidden if it’s not the correct condition, and if they switch to a different box, it’ll hide the box the user was looking at? If so how?

Here’s my code:

        var hiddenClassArray = [
                    "appliedWorkedYes",
                    "workStudyYes",
                    "workHistoryYes",
                    "workWeekEndsYes",
                    "cprYes",
                    "aedYes",
                    "aidYes",
                    "lifegaurd",
                    "wsiYes",
                    "gaurdYes",
                    "lifegaurdChk",
                    "fitnessChk",
                    "fitPTCYes",
                    "fitGrpYes",
                    "outdoorAdvChk",
                    "challengeChk",
                    "injuryCareChk",
                    "athTrainYes",
                    "serviceCenter",
                    "itDepartmentChk",
                    "marketingChk", 
                    "personalTrainer",
                    "yogaInstructr",
                    "IndoorCyclingInstructr",
                    "grpFitInstruct",
                    "pilatesInstructr",
                    "itDepartmentChk",
                    "marketingChk",
                    "yogaInstructr",
                    "cyclingInstructr",
                    "personalTrainerChk",
                    "yogaInstructorChk",
                    "IndoorCyclingInstructorChk",
                    "grpFitInstructChk",
                    "pilatesInstructChk",
                    "itDepartmentChk2",
                    "climbAssistant",
                    "priorWrkName",
                    "priorWrkSalary",
                    "priorWrkTitle",
                    "priorWrkSupervisor",
                    "priorWrkStartDate",
                    "priorWrkEndDate",
                    "priorWrkReasonForLeaving",
                    "officeUseStatus"
                    ];  

        // looping over each array element, hiding them using jQuery
        for(var i = 0; i < hiddenClassArray.length; i++){
            // jQuery to append a display none. 
            $("."+hiddenClassArray[i]+"Hide").css("display","none");    
        }

        // ************ RADIO & CHECK BOXES ************

    // jQuery's Equlivant of a for each loop, a little fancier then that 
    // This appears to work better then the for loop above, but the for loop above
    // has no problems but it did for this set. 
    $.each(hiddenClassArray, function(index, radio) {

        // first is it a Check box? 
        if($("."+radio).is(':checkbox')) {
            // when we click
            $("." + radio).click(function() {
                // if it's checked show
                if($("."+ radio).attr('checked')){
                    // show
                    $("." + radio + "Hide").show('fast'); 
                    // make one of the group required
                    $("."+ radio + "Required").addClass("required");
                }
                // default hide
                else{ 
                    // hide 
                    $("."+ radio + "Hide").hide("fast");
                    // remove the required class attribute
                    $("."+ radio + "Required").removeClass("required");
                }
            }); // ends .click
        } // ends if
        // if it's a radio box
        else if ($("."+radio).is(':radio')) {
            // On click
            $("."+radio).click(function(){
                // show
                if($(this).val()==="True"){                         
                    // show
                    $("."+radio + "Hide").show("fast");
                    // make one of the group required
                    $("."+radio + "Required").addClass("required");
                    alert("Got here ! ");
                }
                else if($(this).val()=="nc"){
                    $("."+radio + "Hide").show("fast");
                }
                // default, hide
                else{ 
                    // hide
                    $("."+radio + "Hide").hide("fast");
                    // remove the required class attribute
                    $("."+radio + "Required").removeClass("required");
                }
            }); // emds .click

        }// ends else
    }); // end .each

Answer 1

Try to replace the below code

$.each(hiddenClassArray, function(index, radio) {

    // first is it a Check box? 
    if($("."+radio).is(':checkbox')) {
        // when we click
        $("." + radio).click(function() {
            // if it's checked show
            if($("."+ radio).is(':checked')){
                // show
                $("." + radio + "Hide").show(); 
                // make one of the group required
                $("."+ radio + "Required").addClass("required");
            }
            // default hide
            else{ 
                // hide 
                $("."+ radio + "Hide").hide();
                // remove the required class attribute
                $("."+ radio + "Required").removeClass("required");
            }
        }); // ends .click
    } // ends if
    // if it's a radio box
    else if ($("."+radio).is(':radio')) {
        // On click
        $("."+radio).click(function(){
            // show
            if($(this).val()==="True"){                         
                // show
                $("."+radio + "Hide").show();
                // make one of the group required
                $("."+radio + "Required").addClass("required");
                alert("Got here ! ");
            }
            else if($(this).val()=="nc"){
                $("."+radio + "Hide").show();
            }
            // default, hide
            else{ 
                // hide
                $("."+radio + "Hide").hide();
                // remove the required class attribute
                $("."+radio + "Required").removeClass("required");
            }
        }); // emds .click

    }// ends else
}); // end .each