jquery查找checked属性的对象示例
发布时间：2016-01-01 编辑：jiaochengji.com
本文介绍了jquery查找checked属性对象的方法，有需要的朋友参考下。
如何使用jquery查询radio和checkbox,select标签的对象，还有被选中的对象。
例子：
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
.option{
width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function(){
$("#hobby_select_all").toggle(selectAll,unselectAll);
}
);
function testHobby(){
//选择被选中而且类型为checkbox的对象
//$('input[@name=items][@checked]')好像查找不到对象
$("input:checked[type=checkbox]").each(function(i,obj){
alert($(this).val());
});
} www.jbxue.com
function selectAll(){
//设置字符串也可以，但是全部不选的时候好像功能不能实现
$("input[type=checkbox]").attr("checked",true);
}
function unselectAll(){
//如果设置的值为字符串，页面的效果可能显示不出来
$("input[type=checkbox]").attr("checked",false);
}
function testSex(){
$("input[type=radio]").each(function(i,obj){
alert($(this).val());
});
}
function testCheckedSex(){
alert($("input:checked[type=radio]").val());
}
function testSelect(){
alert($("select").val());
//下面这种方式好像查找不到对象
//alert($(".select").find('option:selected').html());
}
function resetValue(){
$("select").val("2011");
//$("select").val("2011");无效设置
}
</script>
<title>无标题文档</title>
</head>
<body>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="hobby" value="basketball" checked>篮球
<input type="checkbox" name="hobby" value="skiing">轮滑
<input type="checkbox" name="hobby" value="music">唱歌
<input type="checkbox" name="hobby" value="net_work">上网
<br>
<input type="button" value="遍历选中的" onclick="testHobby()">
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="全部不选" onclick="unselectAll()">
<input type="checkbox" value="selectAll" id="hobby_select_all">全选
</fieldset>
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
<br>
<input type="button" value="测试" onclick="testSex()"><br>
<input type="button" value="测试已经选中的" onclick="testCheckedSex()">
</fieldset>
<fieldset>
<legend>出生日期</legend>
<select class="option">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<br />
<input type="button" value="测试已经选中的" onclick="testSelect()">
<input type="button" value="重新设置" onclick="resetValue()">
</fieldset>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
.option{
width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function(){
$("#hobby_select_all").toggle(selectAll,unselectAll);
}
);
function testHobby(){
//选择被选中而且类型为checkbox的对象
//$('input[@name=items][@checked]')好像查找不到对象
$("input:checked[type=checkbox]").each(function(i,obj){
alert($(this).val());
});
} www.jbxue.com
function selectAll(){
//设置字符串也可以，但是全部不选的时候好像功能不能实现
$("input[type=checkbox]").attr("checked",true);
}
function unselectAll(){
//如果设置的值为字符串，页面的效果可能显示不出来
$("input[type=checkbox]").attr("checked",false);
}
function testSex(){
$("input[type=radio]").each(function(i,obj){
alert($(this).val());
});
}
function testCheckedSex(){
alert($("input:checked[type=radio]").val());
}
function testSelect(){
alert($("select").val());
//下面这种方式好像查找不到对象
//alert($(".select").find('option:selected').html());
}
function resetValue(){
$("select").val("2011");
//$("select").val("2011");无效设置
}
</script>
<title>无标题文档</title>
</head>
<body>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="hobby" value="basketball" checked>篮球
<input type="checkbox" name="hobby" value="skiing">轮滑
<input type="checkbox" name="hobby" value="music">唱歌
<input type="checkbox" name="hobby" value="net_work">上网
<br>
<input type="button" value="遍历选中的" onclick="testHobby()">
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="全部不选" onclick="unselectAll()">
<input type="checkbox" value="selectAll" id="hobby_select_all">全选
</fieldset>
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
<br>
<input type="button" value="测试" onclick="testSex()"><br>
<input type="button" value="测试已经选中的" onclick="testCheckedSex()">
</fieldset>
<fieldset>
<legend>出生日期</legend>
<select class="option">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<br />
<input type="button" value="测试已经选中的" onclick="testSelect()">
<input type="button" value="重新设置" onclick="resetValue()">
</fieldset>
</body>
</html>
您可能感兴趣的文章：
jquery选择器之属性过滤选择器
Jquery表单取值赋值操作实例
jQuery 取值、赋值的基本方法整理
jquery查找checked属性的对象示例
jquery无法设置checkbox选中即没有变成选中状态
Jquery 表单取值赋值的一些基本操作
jquery选择器之属性过滤选择器详解
jQuery Selector选择器小结
Jquery 获取对象的多种方式
基于jQuery选择器的整理集合
[关闭]