JS获取option的值+获取checkbox的值+radio的值

JS获取select标签下选中的option的值+checkbox选中的值+radio选中的值

1.select标签下选中的option的值
第一种：
html中：

<select name="city" id="city">
                        <option >北京</option>
                        <option >上海</option>
                        <option >重庆</option>
                    </select>

接下来我们要在js中获取所选中的option的值
直接let city=document.getElementById("city").value;即可，
我们console一下–>console.log(city);
如图：

第二种，也可以判断每个option是否被选中
通过selected判断，遍历所有option，selected为true的就是选中的option

let city=document.getElementById("city");
for(let i=0;i<city.options.length;i++){
        	if(city.options[i].selected){
        		console.log(city.options[i].value)
        	}
        }

如图：

2.checkbox选中的值
html中：

            <tr>
                <td style="float: right;">兴趣：</td>
                <td id="hobby">
                    <input type="checkbox" name="hobby" value="看电影">看电影
                    <input type="checkbox" name="hobby" value="敲代码">敲代码
                    <input type="checkbox" name="hobby" value="玩游戏">玩游戏
                </td>
            </tr>

遍历数组，使用checked判断是否选中

let hobby=document.getElementsByName("hobby");
for(let i=0;i<hobby.length;i++){
        	if(hobby[i].checked){
        		console.log(hobby[i].value);
        	}
        }

如图：

3.radio选中的值
遍历数组，使用checked判断是否选中
html:

            <tr>
                <td style="float: right;">性别：</td>
                <td id="sex">
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>

js中：

let sex=document.getElementsByName("sex");
for(let i=0;i<sex.length;i++){
        	if(sex[i].checked){
        		console.log(sex[i].value)
        	}
        }

如图：

202206152050三