您的位置：首页 > Web前端 > JQuery

jquery获取输入框内的值及radio选择框内的值

2018-01-16 00:00 507 查看

获取输入框内的值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert("Value: " + $("#test").val());
});
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>

获取radio里面的值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery radio</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">

/*------判断radio是否有选中，获取选中的值--------*/
$(function () {
$("#btnSubmit").click(function () {
var val = $('input:radio[name="sex"]:checked').val();
if (val == null) {
alert("什么也没选中!");
return false;
}
else {
alert(val);
}
var list = $('input:radio[name="list"]:checked').val();
if (list == null) {
alert("请选中一个!");
return false;
}
else {
alert(list);
}
});
});
</script>

</head>

<body>
<form id="form1">
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<br/>
<input type="radio" name="list" value="十分满意"/>十分满意
<input type="radio" name="list" value="满意"/>满意
<input type="radio" name="list" value="不满意"/>不满意
<input type="radio" name="list" value="非常差"/>非常差
<br/>
<input type="submit" value="submit" id="btnSubmit"/>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5

相关文章推荐

新的分享

章节导航