当我点击单选按钮时，输入不会消失

I am trying to write a html css js code. in one part of it I have a one group of radio buttons (including 2 items). I want this to happen: if I click the first radio, textbox1 appears, if I click the second one, textbox1 disappears and textbox2 appears and vice versa.

我正在尝试编写html css js代码。在其中的一部分，我有一组单选按钮(包括两项)。我希望发生这种情况:如果我单击第一个单选，textbox1将出现，如果我单击第二个单选，textbox1将消失，textbox2将出现，反之亦然。

this scenario is happening when I click on one of them, but it is not working when I click the second one.

当我单击其中一个时，这个场景正在发生，但是当我单击第二个时，它就不起作用了。

this is my html code:

这是我的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/>

and this is my js :

这是我的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>

can you tell me what am i doing wrong?

你能告诉我我做错了什么吗?

3 个解决方案

#1

change

改变

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

to :

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

I edit your code :

我编辑你的代码:

<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>

#2

Try this,

试试这个,

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

You can even try this using jquery - css method.

您甚至可以使用jquery - css方法来尝试。

#3

Your code is correct ! I have some smart code for that ,have a try it.

您的代码是正确的!我有一些聪明的代码，试试看。

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

#1