make show/hide accessible if javascript is off

问题

$(document).ready(function(){ 
    $("#CO_createAccount").click( function (){ 
        if(this.checked){
            $(".CO_accountForm").show();  
        } else {
            $(".CO_accountForm").hide();  
        }
    });
});

and I have the css set for ".CO_accountForm" set to "display:none;"

But, I want the hidden element to be visible if javascript is turned off. I assume I can do this by adding a hidden class the above, but how would I go about this?

Thanks!

回答1:

Remove the display:none attribute for the ".CO_accountForm" and instead hide/set the display:none attribute via javascript in the document.ready event.

i.e.:

$(document).ready(function(){      
    // hide the form using JS so that if the browser 
    // doesn't support JS then the form is always displayed.
    $(".CO_accountForm").hide(); 
    $("#CO_createAccount").click( function (){          
        if(this.checked){             
            $(".CO_accountForm").show();           
        } else {             
            $(".CO_accountForm").hide();           
        }     
    }); 
}); 

回答2:

Why not just add a <noscript> tag around the form in question? This would ensure that the form is displayed since you wouldn't be able to fire off any javascript anyways.

回答3:

Have element visible by default-- but add a class through jquery which hides them.

来源：https://stackoverflow.com/questions/6255139/make-show-hide-accessible-if-javascript-is-off