单击单选按钮时如何显示下拉列表？

Question

I've tried to call this function but it don't seem to work. Can anyone help me to see if what is wrong with my codes? Any help will be greatly appreciated.

This is my code for my radio button:

    <input type="radio" name="radioFrequency" onclick="myMth()" id="radioFrequency-0" value="Monthly (once a month)" />

This is my code for my dropdownlist

    <div class="control-group" <%--style="display:none;"--%>>
  <label class="control-label" for="ddlMth">Withdrawal Day</label>
  <div class="controls">
    <select id="ddlMth" name="ddlMth" class="input-large">
      <option>Select day</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
  </div>
</div>

This is my js code to call the function:

<script>
        function myMth() {
            $("input[type='radio']").change(function() {

                if ($(this).val() == "Monthly (once a month)") {
                    $("#ddlMth").show();
                }
        else {
                    $("#ddlMth").hide();
        }
            });
            }

    </script>

Answer 1

Try This Script.

$(document).on("change","#wrapper input[type='radio']",function(){
    if($(this).find("input[type='radio']").prop("checked")){
        //Your Code Here
    }
});

Answer 2

No need of of myMth() just use this:

<input type="radio" name="radioFrequency" id="radioFrequency-0" value="Monthly (once a month)" />

Script:

 $("input[type='radio']").change(function () {
            if ($(this).val() == "Monthly (once a month)") {
                $("#ddlMth").show();
            } else {
                $("#ddlMth").hide();
            }
        });

jsfiddle

Answer 3

Take out the onclick event, you are mixing javascript and jquery. You need something like this:

<script>
$( function ()
{
    $("input[type='radio']").change(function() {
        if ($(this).val() == "Monthly (once a month)") {
            $("#ddlMth").show();
        }
        else {
            $("#ddlMth").hide();
        }
     });
});
</script>

This will set up a handler that will fire every time that the radio button changes.

Answer 4

First of all you are using jQuery for displaying and hiding the div section. In your input element you have added onClick listener, which is the part of javascript. In your code you have used change method, which is the part of jQuery. So in effect you are using two listeners which is has no meaning at all.

So you can solve this issue in two way.

1) use onclick event in your input part and make a script for it

2) use click event of jquery(for this, you dont need to provide event listeners in input element)

note: click and change event has lot of changes in its working.

This is the javascript approach. You can achieve this in lot ways. This is only one method.this will trigger when you click on the radio button.

<input type="radio" name="input_name" onclick="myMyth()" />


<script>
function myMth()
{
    var parentDiv=document.getElementById("ddlMth").parentNode.parentNode;  //gets the div element with class 'control-label'
    var displayStatus=parentDiv.style.display;//gets the status of display element of div
   if(displayStatus=="none")
   {
      //if display="none" make it block. so that dropdown will appear
        parentDiv.style.display="block";
   }
   else
   {
       //if display="block" make it block. so that dropdown will disappear
       parentDiv.style.display="none";
   }
}

second approach is jquery for this, you dont need to specify any listeners in input element

 <input type="radio" name="input_name" />

Lot of jQuery solutions is available here. Use any one of those.