使用jQuery完成複選框的全選和全不選
要完成這個效果，必然要了解jQuery中對屬性操作的方法：
-
attr()：設定或返回被選元素的屬性值。- 使用方法一：
$("xxx").attr("src");——返回被選元素的src屬性值 - 使用方法二：
$("xxx").attr("src","test.jpg");——設定被選元素的src屬性值 - 使用方法三：
$("xxx").attr({src:"test.jpg", alt:"Test Image"});——為被選元素設定src和alt屬性
- 使用方法一：
-
removeAttr()：從每一個匹配的元素中刪除一個屬性，即移除屬性。 prop()：與attr()方法類似，只不過它是新版本的方法。- 使用方法一：
$("xxx").prop("src");——返回被選元素的src屬性值 - 使用方法二：
$("xxx").prop("src","test.jpg");——設定被選元素的src屬性值 - 使用方法三：
$("xxx").prop({src:"test.jpg", alt:"Test Image"});——為被選元素設定src和alt屬性
- 使用方法一：
removeProp()：與removeAttr()方法類似，移除屬性。addClass(class)：為每個匹配的元素新增指定的類名，即新增某個樣式。removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，即移除某個樣式。
下面按照如下步驟來使用jQuery完成對複選框的全選和全不選效果：
- 在頁面中新增複選框
- 引入jQuery的js檔案
- 編寫jQuery的入口函式
- 點選上面的複選框，獲得下面所有的複選框
- 修改下面所有的複選框的值
我摘出最重要的一個html檔案——【data.html】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script>
// 表格的隔行換色
$(function() {
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="80%" align="center">
<thead>
<tr>
<th><input type="checkbox" id="selectAll" /></th>
<th>分類的ID</th>
<th>分類的名稱</th>
<th>分類的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>1</td>
<td>手機數碼</td>
<td>手機數碼</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>3</td>
<td>菸酒糖茶</td>
<td>菸酒糖茶</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>5</td>
<td>汽車用品</td>
<td>汽車用品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
接著編寫jQuery程式碼來完成對複選框的全選和全不選效果：
<script>
// 複選框的全選和全不選
$(function() {
// 獲得上面的複選框
var $selectAll = $("#selectAll");
// alert($selectAll.prop("checked")); // 返回undefined未定義
$selectAll.click(function() {
// alert($selectAll.prop("checked"));
if ($selectAll.prop("checked") == true) {
// 上面的複選框已被選中
$(":checkbox[name='ids']").prop("checked", true);
} else {
// 上面的複選框沒被選中
$(":checkbox[name='ids']").prop("checked", false);
}
});
});
</script>
細心的讀者應該能看出以上程式碼能簡化為：
<script>
// 複選框的全選和全不選
$(function() {
$("#selectAll").click(function() {
$(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你當前選擇的這個元素的JS物件
});
});
</script>
參考：
前端簡單入門第十三講 使用JavaScript完成複選框的全選和全不選的效果
別的程式碼參考：
$('input[name="selectall"]').click(function(){ //alert(this.checked); if($(this).is(':checked')){ $('input[name="stuCheckBox"]').each(function(){ //此處如果用attr，會出現第三次失效的情況 $(this).prop("checked",true); }); }else{ $('input[name="stuCheckBox"]').each(function(){ $(this).removeAttr("checked",false); }); //$(this).removeAttr("checked"); } }); <td><input type="checkbox" name="selectall"/></td>
最好不要用attr方法增加屬性，否則會出現第三次點選不生效的情況，用prop方法較好
//沒被選中的
var checkedList = new Array();
$("input[name='id']:not(:checked)").each(function() {
checkedList.push($(this).val());
});
//已選中的
var checkedList = new Array();
$("input[name='id']:checked").each(function() {
checkedList.push($(this).val());
});
<script type="text/javascript"> $(function(a) { $("#checkAllJQuery").click(function() { //alert(this.checked); if(this.checked==true) { $("input[name='chk2']").each(function() {$(this).prop("checked",true)})//法1 //$("input[name='chk2']").each(function() {$(this).attr("checked","checked")})//法2 }else{ $("input[name='chk2']").each(function() {$(this).prop("checked",false)})//法1 //$("input[name='chk2']").each(function() {$(this).removeAttr("checked")})//法2 } }) }) </script>
<input type="checkbox" id="checkAll" onclick="checkAll(this)">全選 <!--JavaScript方式實現全選 --> <script type="text/javascript"> function checkAll(a) { var arrayChecks = document.getElementsByName("chk"); for(var i=0;i<arrayChecks.length;i++) { arrayChecks[i].checked = a.checked; } } </script>
自己實際用的程式碼：
$("#checkAll").bind("click",function () { $('input[name="checkTeacher"]').each(function () { $(this).prop("checked",$("#checkAll").is(":checked")); }) })