jquery checkbox全选反选效果代码_jquery

2016-05-16 18:42 1072浏览原创

运行后查看效果，需要刷新下。

<title>jquery事件2</title>
<script src="http://img.jb51.net/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><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>

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