Question

我试图调用此函数，但它似乎不起作用。任何人都可以帮我看看我的代码有什么问题吗？任何帮助将不胜感激。

这是我的单选按钮的代码：

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

这是我的下拉列表代码

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

这是我调用函数的js代码：

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

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

    </script>

Answer 1

试试这个剧本。

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

Answer 2

不需要使用myMth()：

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

脚本：

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

jsfiddle

Answer 3

取出onclick事件，你正在混合javascript和jquery。你需要这样的东西：

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

这将设置一个处理程序，每次单选按钮更改时都会触发该处理程序。

Answer 4

首先，您使用jQuery来显示和隐藏div部分。在您的input元素中，您添加了onClick侦听器，这是javascript的一部分。在您的代码中，您使用了更改方法，这是jQuery的一部分。所以实际上你使用的是两个没有意义的听众。

所以你可以用两种方式解决这个问题。

1）在输入部分使用onclick事件并为其创建脚本

2）使用jquery的click事件（为此，你不需要在input元素中提供事件监听器）

注意：点击和更改事件在其工作中有很多变化。

这是javascript方法。你可以通过很多方式实现这一目标。这只是一种方法。当你点击单选按钮时会触发。

<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";
   }
}

第二种方法是jquery，你不需要在input元素中指定任何监听器

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

这里有很多jQuery解决方案。使用其中任何一个。

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

4 个答案: