jquery中 如何设置和取得 radio, checkbox, select, multiple的select 的值,稍微整理了一下。 先放在这里,以后如果有更深刻的认识,再来维护此文章。
注意引用一个jquery的包。
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>radio,checkbox,select的使用</title>
- <script src="./js/jquery-1.6.2.js"></script>
- <script>
- $(document).ready(function () {
- // 屏蔽浏览器表单默认的记忆功能
- $('input').attr("autocomplete", "off");
- // radio设置默认值
- $('input:radio[id=rd2]').attr("checked","checked");
- // checkbox设置默认值
- $('input:checkbox[id=ch2]').attr("checked","checked");
- $('input:checkbox[id=ch3]').attr("checked","checked");
- // select设置默认值
- $('#weekSelect').val("2");
- // multiple的select设置默认值
- $('#studentSelect').val(["2","3"]);
- // 取值
- $('#submitBtn').click(function () {
- // radio选中的内容
- alert($('input:radio[name=color]:checked').val());
- // checkbox选中的内容
- $('input:checkbox[name=size]:checked').each( function() {
- alert($(this).val());
- });
- // select选中的内容
- alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());
- // multiple的select选中的内容
- var student = $("#studentSelect").val();
- for(var key in student){
- alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="colorRadio">
- <input type="radio" name="color" id="rd1" value="Red" />Red
- <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow
- <input type="radio" name="color" id="rd3" value="Blue" />Blue
- </div>
- <br>
- <div id="sizeCheck">
- <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt
- <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt
- <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt
- </div>
- <br>
- <div>
- <select id="weekSelect">
- <option value="1">星期一</option>
- <option value="2">星期二</option>
- <option value="3">星期三</option>
- <option value="4">星期四</option>
- <option value="5">星期五</option>
- <option value="6">星期六</option>
- <option value="7">星期日</option>
- </select>
- </div>
- <br>
- <div>
- <select id="studentSelect" multiple="multiple" >
- <option value="1">张三</option>
- <option value="2">李四</option>
- <option value="3">王五</option>
- </select>
- </div>
- <input type="button" id="submitBtn" value="Get Value" />
- </body>
- </html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>radio,checkbox,select的使用</title>
<script src="./js/jquery-1.6.2.js"></script>
<script>
$(document).ready(function () {
// 屏蔽浏览器表单默认的记忆功能
$('input').attr("autocomplete", "off");
// radio设置默认值
$('input:radio[id=rd2]').attr("checked","checked");
// checkbox设置默认值
$('input:checkbox[id=ch2]').attr("checked","checked");
$('input:checkbox[id=ch3]').attr("checked","checked");
// select设置默认值
$('#weekSelect').val("2");
// multiple的select设置默认值
$('#studentSelect').val(["2","3"]);
// 取值
$('#submitBtn').click(function () {
// radio选中的内容
alert($('input:radio[name=color]:checked').val());
// checkbox选中的内容
$('input:checkbox[name=size]:checked').each( function() {
alert($(this).val());
});
// select选中的内容
alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());
// multiple的select选中的内容
var student = $("#studentSelect").val();
for(var key in student){
alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());
}
});
});
</script>
</head>
<body>
<div id="colorRadio">
<input type="radio" name="color" id="rd1" value="Red" />Red
<input type="radio" name="color" id="rd2" value="Yellow"/>Yellow
<input type="radio" name="color" id="rd3" value="Blue" />Blue
</div>
<br>
<div id="sizeCheck">
<input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt
<input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt
<input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt
</div>
<br>
<div>
<select id="weekSelect">
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
<option value="7">星期日</option>
</select>
</div>
<br>
<div>
<select id="studentSelect" multiple="multiple" >
<option value="1">张三</option>
<option value="2">李四</option>
<option value="3">王五</option>
</select>
</div>
<input type="button" id="submitBtn" value="Get Value" />
</body>
</html>