jquery实现全选,全不选,反选效果

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>全选,不全选,反选</title>

<scriptsrc="../js/jquery-1.6.2.min.js"type="text/javascript"></script>

<scriptlanguage="javascript"type="text/javascript">

$(function(){

$("#selectAll").click(function(){//全选

$("#playList:checkbox").attr("checked",true);

});

$("#unSelect").click(function(){//全不选

$("#playList:checkbox").attr("checked",false);

});

$("#reverse").click(function(){//反选

$("#playList:checkbox").each(function(){

$(this).attr("checked",!$(this).attr("checked"));

});

});

});

</script>

</head>

<body>

<divid="playList">

<inputtype="checkbox"value="歌曲1"/>歌曲1<br/>

<inputtype="checkbox"value="歌曲2"/>歌曲2<br/>

<inputtype="checkbox"value="歌曲3"/>歌曲3<br/>

<inputtype="checkbox"value="歌曲4"/>歌曲4<br/>

<inputtype="checkbox"value="歌曲5"/>歌曲5<br/>

<inputtype="checkbox"value="歌曲6"/>歌曲6

</div>

<inputtype="button"value="全选"id="selectAll"/>

<inputtype="button"value="全不选"id="unSelect"/>

<inputtype="button"value="反选"id="reverse"/>

</body>

</html>

相关推荐