11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试表单获取元素值</title>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
padding: 0px 15px;
}
input{
margin-right: 15px;
display: inline-block;
}
</style>
</head>
<body>
<div class="main">
<div class="row">
<label>姓名:</label><input type="text" name="name" value="" />
</div>
<div class="row">
<label>多选:</label>
<label for="checkbox1">多选1:</label><input type="checkbox" name="多选" id="checkbox1" value="checkbox1">
<label for="checkbox2">多选2:</label><input type="checkbox" name="多选" id="checkbox2" value="checkbox2">
<label for="checkbox3">多选3:</label><input type="checkbox" name="多选" id="checkbox3" value="checkbox3">
</div>
<div class="row">
<label>下拉:</label>
<select name="opt">
<option value="opt1" name="opt">下拉1</option>
<option value="opt2" name="opt">下拉2</option>
<option value="opt3" name="opt">下拉3</option>
<option value="opt4" name="opt">下拉4</option>
</select>
</div>
<div class="row">
<label>单选:</label>
<label for="radio1">单选1:</label><input type="radio" name="radio" id="radio1" value="radio1">
<label for="radio2">单选2:</label><input type="radio" name="radio" id="radio2" value="radio2">
<label for="radio3">单选3:</label><input type="radio" name="radio" id="radio3" value="radio3">
<label for="radio4">单选4:</label><input type="radio" name="radio" id="radio4" value="radio4">
</div>
<button id="submit">提交</button>
</div>
<script type="text/javascript">
$("#submit").on("click",function(){
//给多选框的某个选中
$(".main").find("input[name='多选']")[1].checked=true;
//获取多选框选中的索引：
console.log("多选框suoyin："+$("input[name='多选']").index($("input[name='多选']:checked")));
//获取复选框选中的值：
var arr=document.getElementsByName("多选");
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
console.info("多选框:"+arr[i].value);
}
}
//反选
// $('input[name="多选"]').each(function () {
// $(this).prop("checked", !$(this).prop("checked"));
// });
//输入框设置值
$("input[name='name']").val("wlz111")
//获取输入框值：
console.info("输入框:"+$("input[name='name']").val());
//将下拉框设置成某个值
$(".main").find("select[name='opt']").get(0).selectedIndex = 3;
//获取下拉框值
console.log("下拉框："+$('select').val());
//单选按钮设置值
$(".main").find("input[name='radio']")[3].checked=true;
//获取单选按钮的值：
console.log("单选按钮："+$(".main").find("input[name='radio']:checked").val());
//获取单选按钮选中的索引：
console.log("单选按钮suoyin："+$("input[type=radio]").index($("input[type=radio]:checked")));
})
</script>
</body>
</html>