jquery實現全選和全不選功能
阿新 • • 發佈：2019-01-21
方法一：用//Ajax獲取取值
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全選/取消全部 $("#checkAllChange").click(function() { if (this.checked == true) { $(".userid").each(function() { this.checked = true; }); } else { $(".userid").each(function() { this.checked = false; }); } }); // 全選 $("#checkAll").click(function() { $(".userid").each(function() { this.checked = true; }); }); // 取消全部 $("#removeAll").click(function() { $(".userid").each(function() { this.checked = false; }); }); // 反選 $("#reverse").click(function() { $(".userid").each(function() { if (this.checked == true) { this.checked = false; } else { this.checked = true; } }) }); //批量刪除 $("#delAll").click(function() { var arrUserid = new Array(); $(".userid").each(function(i) { if (this.checked == true) { arrUserid[i] = $(this).val(); } }); alert("批量刪除的:" + arrUserid);
//var url="add_hr_save.php?action=addsave_hr_resume_admin&index=<?php echo $index?>&index2=<?php echo $index2?>&id=<?php echo $id?>&url_id="+arrUserid+"&read_ok="+read_ok; }); }); </script> </head> <body> <table border="1"> <tr> <td><input type="checkbox" id="checkAllChange" /></td> <td>使用者id</td> <td>使用者名稱</td> <td>電話</td> <td>地址</td> </tr> <tr> <td><input type="checkbox" class="userid" value="1" /></td> <td>1</td> <td>wangzs1</td> <td>18888000</td> <td>浦東</td> </tr> <tr> <td><input type="checkbox" class="userid" value="2" /></td> <td>2</td> <td>wangzs2</td> <td>18888001</td> <td>上海</td> </tr> <tr> <td><input type="checkbox" class="userid" value="3" /></td> <td>3</td> <td>wangzs3</td> <td>18888002</td> <td>河南</td> </tr> <tr> <td><input type="checkbox" class="userid" value="4" /></td> <td>4</td> <td>wangzs4</td> <td>18888003</td> <td>許昌</td> </tr> <tr> <td></td> <td><input type="button" id="checkAll" value="全選" /></td> <td><input type="button" id="removeAll" value="取消全部" /></td> <td><input type="button" id="reverse" value="反選" /></td> </tr> <tr> <td colspan="4" align="center"><input type="button" value="批量刪除" id="delAll"></td> </tr> </table> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#checkedAll").click(function () {
//alert("aa");
if ($(this).attr("checked")) { // 全選
$("input[name='checkbox_name']").each(function () {
$(this).attr("checked", true);
});
}
else { // 取消全選
$("input[name='checkbox_name']").each(function () {
$(this).attr("checked", false);
});
}
});
});
</script>
<body>
<input type="checkbox" name="checkbox_name" id="checkbox_name_1" />1<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_2" />2<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_3" />3<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_4" />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全選/取消全選
</body>
</html>