html 活动表单,HTML表单

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