JQuery中Checkbox的一些功能
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(":checkbox").attr("checked",false);
$(":checkbox:eq(0)").click(function(){
if($(":checkbox:first").is(":checked"))
{
$("input:checkbox").attr("checked",true);
}else
{
$("input:checkbox").attr("checked",false);
}
});
$(":button:eq(0)").click(function(){
$("input:checkbox[name=xuanx]").attr("checked","checked");
});
$(":button:eq(1)").click(function(){
$("input:checkbox").attr("checked",false);
});
$(":button:eq(2)").click(function(){
$(":checkbox[name=xuanx]").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}else
{
$(this).attr("checked",true);
}
});
});
$(":button:eq(3)").click(function(){
var result="您当前的选项是：";
$(":checkbox[name=xuanx]:checked").each(
function(){
result+=$(this).val()+" ";
}
)
alert(result);
});
})
</script>
</head>
<body>
<center>
<input type="checkbox" />全选/全不选<br /><br />
<input type="checkbox" name="xuanx" value="选项一" />选项一
<input type="checkbox" name="xuanx" value="选项二" />选项二
<input type="checkbox" name="xuanx" value="选项三" />选项三
<input type="checkbox" name="xuanx" value="选项四" />选项四 <br /><br />
<input type="button" value="全选" />
<input type="button" value="全不选" />
<input type="button" value="反选" />
<input type="button" value="提交" />
</center>
</body>
</html>
