Question

我正在尝试检查是否选中了单选按钮，而且我正在尝试获取值，但我不知道为什么它不起作用。我在互联网上看到了很多帖子，视频，还有一些在这个网站上，但没有。所以无奈我在网站上发布这个。

这是我的HTML文件

＆＃13;

function getValue(){

    var checkAge  = false;
    for(var i=0; i<4; i++){
       if(document.getElementById("age"+i).checked){
    		checkAge = true;
    	}
    }
    

}
function loadFunctions() {
  getValue();
}

window.onload = loadFunctions;

＆＃13;

 <!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>

＆＃13;

Answer 1

您无需检查每个单选按钮的checked值。

这是一个更简单的解决方案：

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

如果未选中任何内容，则该值将等于空字符串（''）。因此，checkAge的逻辑可以简化为：

var checkAge = ageRange !== '';

Answer 2

你的for循环从0到3循环显示i，所以你的document.getElementById("age"+i)会查找id =“age0”，“age1”，“age2”，age3“。

将'for'循环更改为for(var i=1; i<5; i++)

Answer 3

将起始索引设为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/

Answer 4

我建议您做的第一件事是清除浏览器缓存，或使用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)
        }
    }
}

感谢。

使用Javascript从单选按钮获取价值

4 个答案: