使用Javascript從單選按鈕獲取價值

我想檢查單選按鈕是否被選中，並且我正在嘗試獲取值，但我不知道爲什麼它不起作用。我在網上看到很多帖子，視頻，還有一些在這個網站上，但沒有。所以無奈，我在網站上發佈這個。使用Javascript從單選按鈕獲取價值

這是我的HTML文件

function getValue(){ 
 

 
    var checkAge = false; 
 
    for(var i=0; i<4; i++){ 
 
     if(document.getElementById("age"+i).checked){ 
 
    \t \t checkAge = true; 
 
    \t } 
 
    } 
 
    
 

 
} 
 
function loadFunctions() { 
 
    getValue(); 
 
} 
 

 
window.onload = loadFunctions;

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>Tutorial</title> 
 
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 
    <body> 
 
    
 
     <form id="form"> 
 
      <section id="age_question"> 
 
       <h2>How old are you?</h2> 
 
       <label for="age-one">1-25</label> 
 
       <input type="radio" name="ageRange" id="age1" value="0"/> 
 
       <label for="age-two">26-40</label> 
 
       <input type="radio" name="ageRange" id="age2" value="5" /> 
 
       <label for="age-three">41-60</label> 
 
       <input type="radio" name="ageRange" id="age3" value="8" /> 
 
       <label for="age-four">60+</label> 
 
       <input type="radio" name="ageRange" id="age4" value="10" /> 
 
      </section> 
 
    
 
      <section id="bmi"> 
 
       <h2>What is your BMI?</h2> 
 
       <label for="bmi-level"><span>0-25</span></label> 
 
       <input type="radio" name="bmi_range" id="" value="0"/> 
 
       <label for="bmi-level"><span>26-30</span></label> 
 
       <input type="radio" name="bmi_range" id="" value="0" /> 
 
       <label for="bmi-level"><span>31-35</span></label> 
 
       <input type="radio" name="bmi_range" id="" value="9" /> 
 
       <label for="bmi-level"><span>35+</span></label> 
 
       <input type="radio" name="bmi_range" id="" value="10" /> 
 
      </section> 
 
    
 
      <section id="family_history"> 
 
       <h2>Does anybody in your family have Diabetes?</h2> 
 
       <label for="history"><span>No</span></label> 
 
       <input type="radio" name="f_history" id="history" value="0"/> 
 
       <label for="history"><span>Grandparent</span></label> 
 
       <input type="radio" name="f_history" id="history" value="7" /> 
 
       <label for="history"><span>Sibling</span></label> 
 
       <input type="radio" name="f_history" id="history" value="15" /> 
 
       <label for="history"><span>Parent</span></label> 
 
       <input type="radio" name="f_history" id="history" value="15" /> 
 
      </section> 
 
    
 
      <section id="diet"> 
 
       <h2>How would you describe your diet?</h2> 
 
       <label for="diet"><span>Low sugar</span></label> 
 
       <input type="radio" name="dietHabits" id="dietHabit" value="0"/> 
 
       <label for="diet"><span>Normal sugar</span></label> 
 
       <input type="radio" name="dietHabits" id="dietHabit" value="0" /> 
 
       <label for="diet"><span>Quite high sugar</span></label> 
 
       <input type="radio" name="dietHabits" id="dietHabit" value="7" /> 
 
       <label for="diet"><span>High sugar</span></label> 
 
       <input type="radio" name="dietHabits" id="dietHabit" value="10" /> 
 
      </section> 
 
      <button onclick="getValue()">Get You BMI</button> 
 
      <p id="message"></p> 
 
     </form> 
 
     
 
     
 
     <script type="text/javascript" src="js/main.js"></script> 
 
    </body> 
 
    </html>

來源

2017-08-06 Singh Prajit

'for（var i = 1; i <= 4; i ++）'它應該從1開始到'<= 4'或'<5' – Gerardo

我試過但不起作用 –

我會建議你做的第一件事就是清除瀏覽器緩存，或者使用F12推出開發工具，並選中「禁用緩存」的「網絡」選項卡上。

編輯：更改了按鈕類型，並使checkAge成爲全局。

好的，按鈕確實提交了表單，對重新加載後丟失的變量進行了所有更改。爲了解決這個問題，改變按鈕類型，只是button，如：

<button type="button" onclick="getValue()">Get You BMI</button>

這樣的話，它不會重新加載每次您按下按鈕。另一件要做的事是使checkAge變量全局。這種方式默認定義爲false。

"age"+i你做的事情是用i=0開始迭代，因此給出elementId爲age0。這使得元素null。

要解決該問題，您可以將for循環更改爲for(var i=1; i<=4; i++)，或使用您定義的相同循環，但在使用之前將i加1。

和代碼會像這樣：

var checkAge = false; 
 

 
function getValue(){ 
 

 
    for(var i=0; i<4; i++){ 
 
     var index = i + 1 
 
     var element = document.getElementById("age"+index) 
 

 
     if(element.checked){ 
 
      checkAge = true; 
 
      alert("The value is"+element.value) 
 
     } 
 
    } 
 
}

感謝。

來源

2017-08-06 22:24:59

這給我的價值，但它不檢查單選按鈕是否檢查，我該怎麼做？ –

也cleari ng緩存我真的，但瀏覽器不保持console.log –

@SinghPrajit我做了一些改變，檢查看看他們是否能解決你的問題。 –

你並不需要檢查每個單選按鈕的checked值。

這裏有一個簡單的解決方案：

var form = document.getElementById('form'); 
var ageRange = form.ageRange.value;

價值將等於沒事的時候檢查空字符串（''）。因此，對於checkAge邏輯可以簡化爲：

var checkAge = ageRange !== '';

來源

2017-08-06 21:53:51

您好Marko感謝您的支持快速回答。但是我沒有得到你的代碼。對不起，我完全新在這 –

@SinghPrajit你的回答非常含糊。你究竟得不到什麼？第一行用'id'作爲'form'找到元素，第二行在窗體中找到'ageRange'（name對應於單選按鈕的'name'）值，最後一行將'checkAge'設置爲true如果'ageRange'不爲空，則將其設置爲true。這是真正基本的JavaScript代碼，可以訪問DOM和簡單的布爾檢查。如果你覺得這很難理解，我建議你首先學習JavaScript的基礎知識，但這不是應該在這個答案中解決的問題。 –

我現在明白了，在我沒有閱讀最後一行之前。 –

你的for循環是通過i從0循環 - 3，讓你的document.getElementById("age"+i)會尋找ID = 「age0」，「AGE-1」，「AGE2歲，」。age3"

改變你的 'for' 循環到for(var i=1; i<5; i++)

來源

2017-08-06 21:57:38 Yeedub

我也試過，但它似乎不起作用，它仍然是錯誤的。 –

您的'getValue（）'只在最初加載頁面時運行一次。如果您在選中一個年齡單選框後再次運行'getValue（）'，您的checkAge應該設置爲true。 – Yeedub

在你的'getValue（）'函數的末尾添加'return checkAge'，你可以看到在控制檯中運行'getValue（）'時檢查'checkAge'的值（檢查一個年齡單選框後。 – Yeedub

讓起始索引是1而不是0，因爲你的ID選擇從1開始：

function getValue() { 
    var checkAge = false 

    for (var i = 1; i <= 4; i++) { 
    if (document.getElementById('age' + i).checked) { 
     checkAge = true 
    } 
    } 

    console.log(checkAge) 

    return checkAge 
}

的jsfiddle演示：https://jsfiddle.net/a3fzd2kv/2/

來源

2017-08-06 22:05:22

我試過了，甚至在提交表格後我仍然得到錯誤 –

提交後應該是true，gif http://g.recordit.co/txON3ghIvu.gif –

但是，一旦嘗試在我的瀏覽器上不起作用 –

使用Javascript從單選按鈕獲取價值

回答

相關問題