溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“js, jQuery怎么實現全選和反選功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“js, jQuery怎么實現全選和反選功能”文章能幫助大家解決問題。
js ，jq實現全選、反選功能：
js:思路：
1.點擊全選按鈕實現，下面內容全選，與反選
2.下面有一個沒有選中時，全選按鈕不勾選，當全部選中時才全選。這里引入一個計數器，來判斷是否全部選中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
全選<input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
<div id="lower">
蘋果<input type="checkbox" name="apple" id="apple"/>
香蕉<input type="checkbox" name= "banner" id="banner" />
橘子<input type="checkbox" name="origin" id="origin"/>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var lb = document.getElementById("lower");
var lber = lb.getElementsByTagName("input");
//全選，反選
box.onclick = function(){
if(this.checked){
for(var i=0;i<lber.length;i++){
lber[i].checked = true;
}
}else{
for(var i=0;i<lber.length;i++){
lber[i].checked = false;
}
}
}
//下面全選后，全選框才勾上
for(var i=0;i<lber.length;i++){
lber[i].onclick = function(){
//引入計數器sum
var sum = 0;
for(var j=0;j<lber.length;j++){
if(lber[j].checked){
sum += 1;
if(sum == lber.length){
box.checked = true;
} else {
box.checked = false;
}
}
}
}
}
</script>
</body>
</html>jq,使用jQuery 前先引入 jq:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" value="全選" id="ckAll"/>水果</br>
<div class="box">
<input type="checkbox" value="蘋果" id="apple"/>蘋果
<input type="checkbox" value="香蕉" id="bann"/>香蕉
<input type="checkbox" value="橘子" id="origin"/>橘子
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//給所有 .box input 元素添加 checked = ckAll 當前的狀態；
//prop('checked',value) ,第一個值獲取屬性，第二個值：設置屬性值。prop只有一個參數時，表示獲取元素屬性。
$('#ckAll').click(function(){
$('.box input').prop('checked',$(this).prop('checked'));
});
$('.box input').click(function(){
//each 便利每一個元素，讓其執行該函數
$('.box input').each(function(){
if(!$(this).prop('checked')){
$('#ckAll').prop('checked',false);
//有一個不滿足就 跳出該循環，避免執行下面
return false;
}else{
$('#ckAll').prop('checked',true);
}
})
})</script>
</body>
</html>關于“js, jQuery怎么實現全選和反選功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
