Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2777
  • Last Modified:

Jquery radiobutton show hide div question

Hi there, i have two radio buttons that should show/hide two divs, I am using jquery here is my code, as far as i can tell both divs are hidden on load but the checkbox does not show them. using the latest jquery.
<script type="text/javascript">
    $(document).ready(function(){
	$("#hourlydiv, #fixedfee").hide();
    
	if($("input[name='type']:checked").val() =="hourly") {
            $("#hourlydiv").show("fast");
            $("#fixedfeediv").hide("fast");
	} else if ($("input[name='type']:checked").val() =="fixed") {
            $("#hourlydiv").hide("fast");
            $("#fixedfeediv").Show("fast");
	}
});
 
     </script>

Open in new window

0
cookiejest
Asked:
cookiejest
2 Solutions
 
strickddCommented:
you need to create an onclick function that will show/hide the div's, the ready function will only be called when the page is done loading.
0
 
SadafRasheedCommented:
try this
<script type="text/javascript">
    $(document).ready(function(){
        $("#hourlydiv, #fixedfee").hide();
    
		$("input[name='type']").click(function (){
		
			if($("input[name='type']:checked").val() == "hourly" ) {
				$("#hourlydiv").show("fast");
				$("#fixedfeediv").hide("fast");
			} else if ($("input[name='type']:checked").val() =="fixed") {
				$("#hourlydiv").hide("fast");
				$("#fixedfeediv").Show("fast");
			}
		});
		
        
});
 
</script>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now