html 表单获取radio的值,用JS和JQuery分别获取表单元素的值(select,checkbox,radio)

废话不多说直接上代码

HTML部分

表单元素值获取

下拉列表

---

星期一

星期二

星期三

星期四

星期五

多选框

swimming

singing

drawing

travelling

单选框

boy

girl

用JavaScript的方法

解释说明部分在注释中

//用原生JS获取

var getSelectorValue = function(){

var selector = document.getElementById("weekday");

//先获取到整个下拉列表，在获取到被选中元素的索引，最后得到值

var value = selector.options[selector.selectedIndex].value;

console.log(value);

}

var getCheckboxValue = function(){

var checkbox = document.getElementsByName("hobby");

console.log(checkbox);//是一个节点列表

checkbox.forEach(element => {

if(element.checked){

//获取到被选中的元素节点

console.log(element);

//获取节点中的value属性

console.log(element.value);

}

});

}

var getRadioValue = function(){

var radio = document.getElementsByName("sex");

console.log(radio);//是一个节点列表

radio.forEach(element => {

if(element.checked){

//获取到被选中的元素节点

console.log(element);

//获取节点中的value属性

console.log(element.value);

}

});

}

用JQuery的方法

//用JQuery获取

var getSelectorValue = function(){

var value = $("#weekday").val();

console.log(value);

}

var getCheckboxValue = function(){

//获取到所有被选中的列表

var checkbox = $("input[name='hobby']:checked");

for(var i=0; i

console.log(checkbox[i].value);

}

}

var getRadioValue = function(){

//因为是单选可以直接获取到被选中的值

var value = $("input[name='sex']:checked").val();

console.log(value);

}

Practice Makes Perfect