如何使用JavaScript获取select下拉框和radio单选按钮的选中值

1. 你给id="grade"绑定在了div容器上，div没有内置的value属性，直接读取该节点的value必然返回空值
2. 下拉选<select>本身支持直接读取value属性，但你所有<option>的value都统一设为了checkbox，即便读取成功也无法得到选中的月份值，另外你的月份拼写存在少量错误（Decembar→December、Octomber→October）

单选按钮部分的HTML可以不用修改，仅调整JS逻辑就能正常取值。如果需要拿到正确的月份值，建议修改下拉选的option配置，否则所有选中项返回的值都是固定的checkbox，无法区分不同月份。

调整后的HTML（仅修改下拉选部分） #

<form>
<div>
    <h1>Details</h1>
<div>
    <label>Name</label>
    <input type="text" id="name">
</div>
<div>
    <label>Index</label>
    <input type="text" id="index">
</div>
<div>
    <label>Phone</label>
    <input type="text" id="phone">
</div>
<div id="grade">
  <label><input type="radio" name="groupName" value="5"> 5</label>
  <label><input type="radio" name="groupName" value="6"> 6</label>
  <label><input type="radio" name="groupName" value="7"> 7</label>
  <label><input type="radio" name="groupName" value="8"> 8</label>
  <label><input type="radio" name="groupName" value="9"> 9</label>
  <label><input type="radio" name="groupName" value="10"> 10</label>
<div>           
    
</div>
<div>
    <label>Session</label>
    <select id="session">
        <option value="December">December</option>
        <option value="November">November</option>      
        <option value="October">October</option>
        <option value="September">September</option>         
        <option value="August">August</option>        
        <option value="July">July</option>
        <option value="June">June</option>
        <option value="May">May</option>
        <option value="April">April</option>
        <option value="March">March</option>
        <option value="February">February</option>
        <option value="January">January</option>
    </select>

</div>
<div>
    <input type="button" value="Input student"id="import" onclick="inport();">
</div>
</div>
</form>

调整后的JS代码 #

function inport(){
    var name = document.getElementById("name").value;
    var index = document.getElementById("index").value;
    var phone = document.getElementById("phone").value;
    // 获取选中的单选按钮值，增加空判断避免未选择时报错
    var checkedGrade = document.querySelector('input[name="groupName"]:checked');
    var grade = checkedGrade ? checkedGrade.value : '';
    var session = document.getElementById("session").value;
    console.log(name);
    console.log(index);
    console.log(phone);
    console.log(grade);
    console.log(session);
}

如果你不想修改option的value属性，也可以直接读取选中项的文本内容获取月份：
var session = document.querySelector('#session option:checked').textContent

内容的提问来源于stack exchange，提问作者itmemilan