信鸽网

jquery checkbox全选反选效果代码

  作者：bea

运行后查看效果，需要刷新下。 <!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> <title>jquery事件2</title&
运行后查看效果，需要刷新下。



<!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>
<title>jquery事件2</title>

<script src="http://img./jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(function(){
var v;
//全选
$("#Button1").bind("click",function(){
$("[name=item]:checkbox").attr("checked",true);
});
//反选
$("#Button2").bind("click",function(){
$("[name=item]:checkbox").attr("checked",false);
});
//
$("#Button3").bind("click",function(){
$("[name=item]:checkbox").each(function(){
this.checked=!this.checked;
})
});
var str="";
$("#Button4").bind("click",function(){
$("[name=item]:checkbox:checked").each(function(){
str+=$(this).val()+","

})
alert("您最喜欢的运动是:"+str);
str="";
})

})

// --></script>
</head>
<body>
<div id="show">
<div>你最喜欢的体育运动是?</div>
<div>你的姓名:<input id="Text1" type="text" /></div>
<div id="title"><input id="Checkbox1" name="item" type="checkbox" value="足球" />足球
<input id="Checkbox2" name="item" type="checkbox" value="篮球" />篮球
<input id="Checkbox3" name="item" type="checkbox" value="兵乓球" />兵乓球
<input id="Checkbox4" name="item" type="checkbox" value="游泳" />游泳
</div>
<div id="content">
<input id="Button1" type="button" value="全选" />
<input id="Button2" type="button" value="取消反选" /></div>
<input id="Button3" type="button" value="反选" />
<input id="Button4" type="button" value="Click" />
</div>
</body>
</html>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: