总结了两个自己用过的关于选择的按钮：
1.全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
第一个:<input type="checkbox"><br>
第二个:<input type="checkbox"><br>
第三个:<input type="checkbox">
<button id="one">全选</button>
<button id="two">全不选</button>
<button id="three">反选</button>
<script src="./jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('#one').click(function(){
$('input').prop('checked',true);//这里用attr有可能不行，网上有关于两者的区别，本人也不是很清楚，在此不解释
})
$('#two').click(function(){
$('input').attr('checked',false);
})
$('#three').click(function(){
$("input:checkbox").each(function (i) {
if (this.checked) {
this.checked = false;
} else {
this.checked = true;
}
});
})
})
</script>
</body>
</html>
2.稍微漂亮一点的点击选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#one{
width:50px;
height:50px;
/*border-radius: 25px;*/
background-repeat:no-repeat;
background-position:5px 0px;
background-color:#ddd;
}
</style>
<body>
<div id="one"></div>
<script src="./jquery-1.8.3.min.js"></script>
<button id="tj">提交</button>
<script>
// 当点击的时候如果有、没有att这个自定义属性(用于判断每次的点击)执行不同的操作
$('#one').click(function(){
if(!$(this).attr("att")){
$(this).css({"background-image":"url('./22.png')"});
$(this).css({"background-size":"40px 50px"});
$(this).attr({"att":"at"});
}else{
$(this).css({"background-color":"#ddd"});
$(this).css({"background-image":""});
$(this).removeAttr("att");
}
})
$('#tj').click(function(){
if($('#one').attr("att") == "at"){
alert('aaaaaaaaaaaaa');
}
})
</script>
</body>
</html>