1.单选按钮 type="radio"
同一组的单选按钮name属性值必须一致,因为单选的排他性依靠的就是这个name
英雄联盟
红色警戒2
男
女
设置默认选中 checked
男
女
JS获取当前选中单选框的值
var radios = document.querySelectorAll('input[name=sex]')
function getVal(){
radios.forEach(item => {
if(item.checked){
console.log(item.value)
}
})
}
2.复选按钮 type="checkbox"
请为同一组的按钮设定相同的name
英雄联盟
红色警戒2
拳皇
设置默认选中 checked
英雄联盟
红色警戒2
拳皇
JS获取当前选中复选框的值
var checks = document.querySelectorAll('input[name=game]')
function getVal(){
var arr = []
checks.forEach(item => {
if(item.checked) {
arr.push(item.value)
}
})
console.log(arr)
}
3.下拉菜单
Volvo
Saab
Fiat
Audi
设置默认选中 selected
Volvo
Saab
Fiat
Audi
JS获取下拉菜单的值,哪个option被选中,他的value值就是select的value值
var select = document.querySelector('#car')
console.log(select.value)
4.表单默认选中的注意点
男
女
英雄联盟
红色警戒2
拳皇
实际上标签内的checked/selected属性只是页面渲染的时候初始化内存而已,真正生效的是内存中对应的值
以单选按钮的性别为例,默认为"男",此时你手动选中切换为"女",Dom结构如下
男
女
这说明,Dom里面标签展示的checked属性不会随着操作而改变,它永远都是页面加载时的样子。这也意味着,要判断一个单选/多选框被选中,查看Dom标签展示的相关属性是不准确的,它永远是页面初始化时候的样子(即中看不中用)
想要获取表单的选中状态,只能使用点语法(不推荐getAttribute)
document.querySelector('input').checked;
标签:checked,name,value,表单,item,HTML,选中,单选
来源: https://www.cnblogs.com/OrochiZ-/p/11565264.html