jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值 .
2012-10-22 10:19
531 查看
jquery中 如何设置和取得 radio， checkbox， select， multiple的select 的值，稍微整理了一下。 先放在这里，以后如果有更深刻的认识，再来维护此文章。
注意引用一个jquery的包。
[html]
view plaincopyprint?
<!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>
注意引用一个jquery的包。
[html]
view plaincopyprint?
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值
- jquery如何取得text,areatext,radio,checkbox,select的值
- jquery如何取得text,areatext,radio,checkbox,select的值
- jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作
- jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作
- jQuery设置radio、select、checkbox只读属性后，如何在后台得到数据
- jquery取得text,areatext,radio,checkbox,select的值
- Jquery根据后台数居设置select。radio,checkbox选中
- JQuery设置checkbox的值，取checkbox的值，设置radio的值，取radio的值，设置下拉选select的值，取select的值
- jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作
- Jquery获取设置radio select checkbox 文本框 [转]
- jQuery textbox select checkbox radio 取值，设置值
- Jquery操作select,radio,checkBox,获取选中项的值和文本，根据值和文本设置选中项
- JQuery设置checkbox的值，取checkbox的值，设置radio的值，取radio的值，设置下拉选select的值，取select的值
- css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- jquery设置radio选中以及radio、select、checkbox禁用
- jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作
- jquery 遍历radio,checkbox,select等并设置值