0

我正在开发一个具有表单的移动应用程序，其中有一些无线电选项。这是为了我的学习目的。

背后的基本思想是应用程序将在单选按钮中获取四个身体活动名称，然后根据该名称动态生成一个选择菜单。

我想出了一个解决方案，我将在单选按钮中使用练习名称，并使用 onClick() 将修改选择菜单。但不幸的是，onClick 不起作用。我在网上搜索了足够的时间，但没有找到可以理解的解决方案。

所以，我需要你的帮助。下面是我的代码。如果您能提出解决方案，请指导我并提及您的代码如何以及为什么在这里工作！

<!DOCTYPE html>
<head>
     <script type="text/javascript">


  function COptions(){
     alert("hello World!");
      //document.writeln("Hello World!");
    }  ;


  </script>

   <script>
            try {

    $(function() {

    });

  }
  catch (error) {
    console.error("Your javascript has an error: " + error);
  }
        </script>

</head>
<body>
  <div data-role="page" data-control-title="Home" id="page1">
      <div id="header" data-theme="a" data-role="header">
          <h3 id="header_txt">
              Calorie Burned
          </h3>
      </div>
      <form  name="form" id="form">
      <div data-role="content">
          <div class="form-input" data-role="fieldcontain" data-controltype="textinput">
              <label for="textinput2">
                  Weight 
              </label>
              <input name="weight" id="textinput2" placeholder="Enter weight (in lbs) " value="" data-mini="true"
              type="number"/>
          </div>
          <div id="exercise_type" data-role="fieldcontain" data-controltype="radiobuttons"   >
              <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                  <legend>
                      Choose Type of Exercise:
                  </legend>
                  <input id="radio1" name="exercise_type" value="" type="radio" onClick = "COptions()"  >
                  <label for="radio1">
                      Walking
                  </label>
                  <input id="radio2" name="exercise_type" value="running" type="radio" onClick = "COptions()"  >
                  <label for="radio2">
                      Running
                  </label>
                  <input id="radio3" name="exercise_type" value="cycling" type="radio" onClick = "COptions()" >
                  <label for="radio3">
                      Cycling
                  </label>
                  <input id="radio4" name="exercise_type" value="swimming" type="radio" onClick = "COptions()" >
                  <label for="radio4">
                      Swimming
                  </label>

              </fieldset>
          </div>
          <div data-role="fieldcontain" data-controltype="selectmenu">
              <label for="intensity">
                  Intensity:
              </label>
              <select id="intensity" name="intensity" data-mini="true">
                  <option value="option1">
                  </option>
              </select>
          </div>
          <input class="button" data-icon="arrow-d" data-iconpos="top" value="Submit"
          data-mini="true" type="submit">
      </div>
      <div id="footer" data-theme="a" data-role="footer" data-position="fixed">
          <h3 id="footer_txt">
              A simple calorie calculator
          </h3>
      </div>
  </div>
</body>
</html>
4

1 回答 1

3

与普通网页不同，jQuery Mobile 中的单选按钮以不同的方式工作。因为真正的单选按钮是隐藏的，而自定义的按钮是显示的，所以必须使用更改事件而不是单击事件。此外，如果可能，不要在 jQuery Mobile 中使用内联 javascript onClick，使用 jQuery 执行此操作，如下所示：

$(document).on('pagebeforeshow', '#page1', function(){ 
    $(document).on('change', '[name="exercise_type"]', function(){ 
        alert("hello World!");
    });
});

工作jsFiddle示例：http: //jsfiddle.net/UEypE/

于 2013-07-16T07:19:24.237 回答