Jquery手机号码输入无线电选择

时间:2012-11-02 14:01:30

标签: jquery-mobile radio-button

我正在研究一个计算器。我想在无线电选择中放入5个数字输入,并根据无线电选择求解一个数字。但是,我很难在无线电选择中正确显示数字输入。我已尝试使用<span>标记,最近使用的是ui-grid(请参阅下面的代码)。我无法取得好成绩。

<input type="radio" name="solveforthis" id="radio-choice-1" value="choice-1" checked="checked" />
  <label for="radio-choice-1" class="ui-li-desc">  
    <div class="ui-grid-a">
      <div class="ui-block-a">Field 1</div>
      <div class="ui-block-b"><input type="number" id="val1" value="0.013" style="width:40px"   maxlength="6" /></div>
    </div>
  </label>
<input type="radio" name="solveforthis" id="radio-choice-2" value="choice-2" />
  <label for="radio-choice-2" class="ui-li-desc" value>  
    <div class="ui-grid-a">
      <div class="ui-block-a">Field 2</div>
      <div class="ui-block-b"><input type="number" id="val1" value="0.013" style="width:40px"   maxlength="6" /></div>
    </div>
  </label>

有关如何在无线电选择中使用此功能的任何想法?我应该考虑采用更好的方法吗?

2 个答案:

答案 0 :(得分:0)

你在找这样的东西吗?

enter image description here

源代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Radio Buttons</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
  <div data-role="page" id="myPage">
    <div data-role="content"
      <fieldset data-role="controlgroup">
        <legend><b>Choose a number:</b></legend>
             <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
             <label for="radio-choice-1">1</label>

             <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
             <label for="radio-choice-2">2</label>

             <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
             <label for="radio-choice-3">3</label>

             <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
             <label for="radio-choice-4">4</label>
       </fieldset>
    </div>
  </div><!-- /page -->

</body>
</html>

另见the doc

答案 1 :(得分:0)

我正在寻找同样的问题......

解决方案:http://jsfiddle.net/55jZM/

使用:input type="number"代替输入type="password"