Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/447.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 选择单选按钮时,如何使用jquery mobile显示div?_Javascript_Jquery_Jquery Mobile - Fatal编程技术网

Javascript 选择单选按钮时,如何使用jquery mobile显示div?

Javascript 选择单选按钮时,如何使用jquery mobile显示div?,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,以下是与我的问题相关的问题 我尝试了几种方法来显示/隐藏下拉列表(divid:machinedropdown) 加载时,我想隐藏机器下拉列表,但当用户选择“机器”单选按钮时,它需要显示。有人能为我提出一个解决方案吗 <div data-role="content" id="radio" <form> <fieldset data-role="controlgroup" data-type="horizontal" class="center-contr

以下是与我的问题相关的问题

我尝试了几种方法来显示/隐藏下拉列表(divid:machinedropdown)

加载时,我想隐藏机器下拉列表,但当用户选择“机器”单选按钮时,它需要显示。有人能为我提出一个解决方案吗

<div data-role="content" id="radio"
    <form>
      <fieldset data-role="controlgroup" data-type="horizontal" class="center-controlgroup">
            <input name="radio-choice-h-6" id="radio-choice-h-6a" type="radio" checked="checked" value="on">
            <label for="radio-choice-h-6a">Run</label>
            <input name="radio-choice-h-6" id="radio-choice-h-6b" type="radio" value="off">
            <label for="radio-choice-h-6b">Swim</label>

            <!-- ON SELECT I NEED TO HIDE THE "div id = "machinedropdown" -->
            <input name="radio-choice-h-6" id="radio-choice-h-6c" type="radio" value="off">
            <label for="radio-choice-h-6c">Machine</label>
         </fieldset>
</form>
</div>

<div data-role="content" id="machinedropdown"
  <label class="select" for="select-choice-1">Select, native menu</label>
        <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Machine 1</option>
        <option value="rush">Machine 2</option>
        <option value="express">Machine 3</option>
        <option value="overnight">Machine 4</option>
  </select>
</div>

一种方法是检查收音机是否已被检查,以及它是否是包含特定于机器的ID的元素


首先,将下拉列表的初始状态设置为“隐藏”:

$('#machinedropdown').hide();
接下来,您将侦听收音机输入上的更改事件-如果输入都已选中并且具有特定于
机器的ID
输入(
radio-choice-h-6c
),则将下拉列表设置为显示-否则,将其设置回隐藏(这样,当您将所选单选按钮从
machine
更改为另一个选项时,下拉列表将不再显示):



哇,那就行了。谢谢!我会浏览你的JavaScript来看看发生了什么。如果你不在寻找任何过渡动画,在元素上放置一个显示类,用相同的概念去除这个类是另一个要考虑的路线。谢谢@布雷特韦伯,我也会为了学习而尝试一下。另一个问题是源于Zenith提供的解决方案,它可能适用于您的方法。我正在使用Phonegap。当我使用提供的解决方案时,我可以将其放在函数onBodyLoad()中但是,当简单地将javascript放在html中的标记中时,它就不起作用了。我感觉我需要在页面完全初始化后启动此脚本。你知道为什么会发生这种情况吗?为什么它在phonegap onBodyLoad()中起作用而不是在一个tag@Kane这是因为脚本是在加载dom并将其放置到位之前运行的..如果您将提供的解决方案更改为包含在$(document).ready(function(){here}中,它应该可以工作,或者您可以使用$('selector')。on(“event”,function)将其应用于现有的或将使用该选择器存在的每个元素。
$('input').change(function(){ // On change of radio buttons
    if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
      $('#machinedropdown').show();
      // If the radio button is checked and has the machine id, show the drop down.
    }
    else {
      $('#machinedropdown').hide();
      // Else, re-hide it.
    }
});