簡體   English   中英

如何確保已選擇單選按鈕

[英]How to make sure a radio button has been selected

我正在創建一個轉換表,要求用戶輸入兩個數字,例如59 ,然后將生成一個從5到9的表,將其從英里轉換為公里,或者將公里轉換為英里。 我創建了兩個單選按鈕,一個用於英里至公里,另一個用於公里至米,但是當我鍵入兩個數字(例如25並單擊“轉換”時,它仍然顯示結果,但是我希望這樣做,以便直到其中一個收音機沒有發生任何事情按鈕已被單擊。

<html>
<head>
<script>
function conversion(n)
{
<!--if(n<=1) return 1;-->
return n/0.62137;
}
function conversionTable(rangeStart, rangeEnd)
{
divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
for(i=rangeStart;i<=rangeEnd;i++)
divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
document.getElementById("divResult").innerHTML=divStr;
}
function getnputValue()
{
return document.getElementById("rangeTxt").value;
}

 function check(){
 var radios = document.getElementsByName("choice");

 for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          return true;
      }
 }

 return false;
 }

function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
</script>
</head>
<body>
<p>
Start : <input type=textbox id=rangeTxt value=""/>
Finish : <input type=textbox id=rangeTxt2 value=""/>
<input type=radio name="convert" id="mtokm" value ="Miles to Kilometre"/>    Miles to Kilometre
<input type=radio name="convert" id="kmtom" value ="Kilometre to Miles"/>  Kilometre to Miles
<br>
<br>
<button onClick="conversionTable(getnputValue(),    document.getElementById('rangeTxt2').value)">Convert</button>
</p>
<div id="divResult">
</div>
</body>
</html>

您的原始代碼非常接近,只有兩件事需要研究。

首先,您需要將$('input[type=radio]:checked').size()更改$('input[type=radio]:checked').length 然后在conversionTable()內添加一個if語句,以確保選中了單選。

其次,傳遞給conversionTable()的文本輸入值將作為字符串而不是整數傳遞。 您可以使用parseInt()將它們轉換為整數值。

這樣的事情應該起作用:

HTML

添加parseInt()一個小小的更改。 您可以考慮刪除函數參數,而是在函數內部獲取表單值。 可能會清理一些代碼。

<button onClick="conversionTable(getnputValue(),parseInt(document.getElementById('rangeTxt2').value))">Convert</button>

JavaScript的:

function conversion(n) {
    <!--if(n<=1) return 1;-->
    return n/0.62137;
}

function conversionTable(rangeStart, rangeEnd) {
    if(atLeastOneRadio()) {
        divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
        for(i=rangeStart;i<=rangeEnd;i++) {
            divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
      }
        document.getElementById("divResult").innerHTML=divStr;
  }
}

function getnputValue() {
    return parseInt(document.getElementById("rangeTxt").value);
}

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').length > 0);
}

您可以在這里看到它的工作: https : //jsfiddle.net/oknh926a/

希望有幫助!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM