溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js/jQuery兩種代碼實現全選效果的具體代碼，供大家參考，具體內容如下
注意點
在獲取子選框的時候別加上 全選框的個數了
技巧
找 tbody 下面的input標簽 就可以
jq文件夾自己下載即可
思路
var all=my$("j_tb").getElementsByTagName("input");
// alert(all.length);
//實現1 點擊全選 子選框都得被全選
/**
*
* 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設置所有子選框的checked=true; true不用加""
*
*
*/
my$("j_cbAll").onclick=function(){
if(j_cbAll.checked)
{
for(var i=0;i<all.length;i++)
{
all[i].checked=true;
}
}
else{
for(var i=0;i<all.length;i++)
{
all[i].checked=false;
}
}
}
//實現2 選擇所有的子選框 全選框勾選
var arr=[];
for(var i=0;i<all.length;i++)
{
all[i].onclick=function(){
//思路過程
/**
* 創建數組
* 點擊每個子選框
* 1.數組清零
* 2.fou循環所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數組(arr.push(all[i]))里面
* 3.判斷新的數組長度是否等于子選框數組長度 是的話 全選框被選中（my$("j_cbAll").checked=true） 否則相反
*/
arr=[];
for(var i=0;i<all.length;i++)
if(all[i].checked)
{
arr.push(all[i]);
}
console.log(arr.length);
if(arr.length==all.length){
my$("j_cbAll").checked=true;
}
else{
my$("j_cbAll").checked=false;
}
}
}
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#j_cbAll").click(function () {
//修改下面的哪些checkbox
$("#j_tb input").prop("checked", $(this).prop("checked"));//根據自己來判斷是否全選與否
});
$("#j_tb input").click(function () {
if($("#j_tb input:checked").length == $("#j_tb input").length){
$("#j_cbAll").prop("checked", true)
}else {
$("#j_cbAll").prop("checked", false)
}
});
});
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>飯店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>紅燒肉</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西紅柿雞蛋</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>紅燒獅子頭</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老師</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function my$(id)
{
return document.getElementById(id);
}
var all=my$("j_tb").getElementsByTagName("input");
// alert(all.length);
//實現1 點擊全選 子選框都得被全選
/**
*
* 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設置所有子選框的checked=true; true不用加""
*
*
*/
my$("j_cbAll").onclick=function(){
if(j_cbAll.checked)
{
for(var i=0;i<all.length;i++)
{
all[i].checked=true;
}
}
else{
for(var i=0;i<all.length;i++)
{
all[i].checked=false;
}
}
}
//實現2 選擇所有的子選框 全選框勾選
var arr=[];
for(var i=0;i<all.length;i++)
{
all[i].onclick=function(){
//思路過程
/**
* 創建數組
* 點擊每個子選框
* 1.數組清零
* 2.fou循環所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數組(arr.push(all[i]))里面
* 3.判斷新的數組長度是否等于子選框數組長度 是的話 全選框被選中（my$("j_cbAll").checked=true） 否則相反
*/
arr=[];
for(var i=0;i<all.length;i++)
if(all[i].checked)
{
arr.push(all[i]);
}
console.log(arr.length);
if(arr.length==all.length){
my$("j_cbAll").checked=true;
}
else{
my$("j_cbAll").checked=false;
}
}
}
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#j_cbAll").click(function () {
//修改下面的哪些checkbox
$("#j_tb input").prop("checked", $(this).prop("checked"));//根據自己來判斷是否全選與否
});
$("#j_tb input").click(function () {
if($("#j_tb input:checked").length == $("#j_tb input").length){
$("#j_cbAll").prop("checked", true)
}else {
$("#j_cbAll").prop("checked", false)
}
});
});
</script>
-->
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
