使用jQuery實作全選和反選
首先要導入jquery庫(這個需要各位親們自己來引入咯,* - * )
<script type="text/javascript" src="./js/jquery-1.9.0.js"></script>
主要<body>體裡面的内容為以下代碼(友友們不要介意,希望多多包涵)
<ul id="list">
<li><label><input type="checkbox" value="1">1.時間都去哪兒了</input></label></li>
<li><label><input type="checkbox" value="2">2.海闊天空</input></label></li>
<li><label><input type="checkbox" value="3">3.真的愛你</input></label></li>
<li><label><input type="checkbox" value="4">4.不再猶豫</input></label></li>
<li><label><input type="checkbox" value="5">5.光輝歲月</input></label></li>
<li><label><input type="checkbox" value="6">6.喜歡你</input></label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" id="selectAll" class="btn" value="全選">
<input type="button" id="unSelect" class="btn" value="全不選">
<input type="button" id="reverse" class="btn" value="反選">
下面就是正式jquery操作咯:
1.點選全選的複選框
$('#all').click(function() {
$('#list :checkbox').attr("checked", this.checked);
});
2.全選按鈕
$('#selectAll').click(function(){
$('#list :checkbox, #all').prop("checked", true);
});
3.全不選按鈕
$('#unSelect').click(function(){
$('#list :checkbox, #all').prop("checked", false);
});
4.反選按鈕
$('#reverse').click(function(){
$('#list :checkbox').each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
allchk();
});
5.每個複選框
$('#list :checkbox').click(function(){
allchk();
});
function allchk(){
var chknum = $("#list :checkbox").size();//選項總個數
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全選
$("#all").prop("checked",true);
}else{//不全選
$("#all").prop("checked",false);
}
}
以上便是這次的主要代碼咯,如果有不當的地方,忘友友多多見諒,順便提出一些意見, 謝謝!!
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)