关闭

jquery查找checked属性的对象

228人阅读 评论(0) 收藏 举报

为了解决使用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());
	});
}

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>

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:329305次
    • 积分:8939
    • 等级:
    • 排名:第2254名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论