<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input type="checkbox" value="香蕉" name="fruit">香蕉</input>
<input type="checkbox" value="苹果" name="fruit">苹果</input>
<input type="checkbox" value="西瓜" name="fruit">西瓜</input>
<input type="checkbox" value="梨子" name="fruit">梨子</input>
<button onclick="selectCheckBox()" >显示多选框值</button>
<select id="select">
<option name="kind" url="www.baidu.com" value="百度">百度文本</option>
<option name="kind" url="www.taobao.com" value="淘宝">淘宝文本</option>
</select>
<button onclick="selectOption()" >显示下拉框值</button>
<input type="radio" name="sex" value="男">男</input>
<input type="radio" name="sex" value="女">女</input>
<button onclick="selectRadio()">显示单选框值</button>
</form>
<script type="text/javascript">
//获取多选框值 方法一
function selectCheckBox(){
$.each($('input[type=checkbox]:checked'),function(){
alert($(this).val())
});
}
//获取多选框值 方法二
function selectCheckBox(){
$.each($('input:checkbox'),function(){
if(this.checked){
alert($(this).val())
}
});
}
//获取下拉框值 js方法
function selectOption1(){
var select=document.getElementById("select");
var index=select.selectedIndex;
var value=select.options[index].value;
var text=select.options[index].text;
var url=select.options[index].getAttribute('url');
alert("下拉框索引为:"+index+"值为:"+value+"文本为:"+text+"属性为:"+url)
}
//获取下拉框值 jquery方法
function selectOption(){
var select =$("#select option:selected");
var value=select.val();
var text=select.text();
var url=select.attr('url');
alert("值为:"+value+"文本为:"+text+"属性为:"+url)
}
//显示单选框值
function selectRadio(){
var sex= $('input[type=radio]:checked').val();
alert("选中的性别为:"+sex);
}
</script>
</body>
</html>获取checkbox、select、radio选中的值的方法
猜你喜欢
转载自blog.csdn.net/qq_40693828/article/details/81023762
今日推荐
周排行