總結了兩個自己用過的關于選擇的按鈕：
1.全選與反選
<!DOCTYPE html>
<html >
<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 >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#one{
width:50px;
height:50px;
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>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)