废话不多说直接上代码
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