La input no se desvanecerá cuando click el button de opción

Estoy tratando de escribir un código html css js. en una parte de ella tengo un grupo de botones de radio (incluidos 2 elementos). Quiero que esto suceda: si hago clic en la primera radio, aparece el textbox1, si hago clic en el segundo, el textbox1 desaparece y aparece el textbox2 y viceversa.

este escenario ocurre cuando hago clic en uno de ellos, pero no funciona cuando hago clic en el segundo.

este es mi código html:

<label>Which one do you want to enter?</label> <br/> <label>Budget:</label> <input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/> <div id = "smethod" style="display:none"> <input type="text" name = "budgetsub"> </div> <label>Number of Clicks per Month:</label> <input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/> <div id = "smethod2" style="display:none"> <input type="text" name = "clicksnosub"> </div> <br/> 

y esta es mi js:

 <script type="text/javascript"> $("#submethodbudget").click(function() { $("#smethod").show("300"); $('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none'); }); $("#submethodbudget").click(function() { $("#smethod2").hide("300"); }); </script> <script type="text/javascript"> $("#submethodclicks").click(function() { $("#smethod2").show("300"); $('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none'); }); $("#submethodclicks").click(function() { $("smethod").hide("300"); }); </script> 

¿Puedes decirme qué estoy haciendo mal?

cambio

 $("smethod").hide("300"); 

a :

 $("#smethod").hide("300"); 

Edito tu código:

 <html> <head> </head> <body> <label>Which one do you want to enter?</label> <br/> <label>Budget:</label><input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/> <div id = "smethod" style="display:none"> <input type="text" name = "budgetsub"> </div> <label>Number of Clicks per Month:</label><input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/> <div id = "smethod2" style="display:none"> <input type="text" name = "clicksnosub"> </div> <br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $("#submethodbudget").click(function() { $("#smethod").show("300"); $('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none'); $("#smethod2").hide("300"); }); $("#submethodclicks").click(function() { $("#smethod2").show("300"); $('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none'); $("#smethod").hide("300"); }); </script> </body> </html> 

Prueba esto,

 $(document).ready(function(){ $("#submethodbudget").click(function(){ $("#smethod").show(200); $("#smethod2").hide(200); }); $("#submethodclicks").click(function(){ $("#smethod2").show(200); $("#smethod").hide(200); }); }); 

Incluso puedes probar esto usando el método jquery – css.

Tu código es correcto! Tengo un código inteligente para eso, pruébalo.

  $("input[name=submethod]").click(function() { $('div').hide("300"); $(this).next("div").show("300"); });