jQuery之全选全不选反选方法二

最新推荐文章于 2017-03-20 09:18:09 发布

林子夕

最新推荐文章于 2017-03-20 09:18:09 发布

阅读量318

点赞数

分类专栏：编程之路文章标签： jquery

本文链接：https://blog.csdn.net/qq_21935367/article/details/50481044

版权

编程之路专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html >
<meta charset="utf-8">

<head>

/*此方法是使用index()获得全选全不选反选三个按钮的位置需要注意的是这三个按钮要处在同一个父级元素的内部,最好没有其他的同级元素,否则位置可能或许错误*/

<title>全选，不全选，反选</title>
<script src="jquery-1.7.js"></script>
<script >

function checkboxFun(type,e){
if(type==1){//全选
e.attr("checked",true);
} else if(type==2){ //全不选
e.attr("checked",false);
}else if(type==3){ //反选
e.attr("checked", function(){return !$(this).attr("checked")});
}
}
$(
function(){
$('.q').bind(
"click",
function(){
checkboxFun( $(this).index()+1,$(".box") )
} )

} )


</script>
</head>
<body>
<form>
<div >
<input type="checkbox" value="歌曲1" class="box" />歌曲1<br />
<input type="checkbox" value="歌曲2" class="box" />歌曲2<br />
<input type="checkbox" value="歌曲3" class="box" />歌曲3<br />
<input type="checkbox" value="歌曲4" class="box" />歌曲4<br />
<input type="checkbox" value="歌曲5" class="box" />歌曲5<br />
<input type="checkbox" value="歌曲6" class="box" />歌曲6
</div>
<div>
<input type="button" value="全选" id="selectAll" class="q" />
<input type="button" value="全不选" id="unSelect" class="q"/>
<input type="button" value="反选" id="reverse" class="q"/>
</div>
</form>
</body>
</html>