當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JSjQuery全选反选父项子项联动多选框

發布時間：2025/3/15 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 JSjQuery全选反选父项子项联动多选框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

全選反選父項子項聯動多選框

js代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選</title>
</head>
<body>
<input type="checkbox" id="btn1">全選
<div id="div1">
<input type="checkbox" name="id">
<input type="checkbox" name="id">
<input type="checkbox" name="id">
</div>
<script>
var oBtn1=document.getElementById('btn1');
var aDiv=document.getElementById('div1');
var aCheck = document.getElementsByName("id");
oBtn1.οnclick=function(){
for(var i=0; i<aCheck.length; i++){
if(oBtn1.checked==true){
aCheck[i].checked=true;
}
else{
aCheck[i].checked=false;
}
}

};
for(var i=0; i<aCheck.length; i++){
var n=0;
aCheck[i].οnclick=function(){
if(this.checked){
n+=1;//獲取被選中的input元素長度
}else{
n-=1;
}
if(n==aCheck.length){
oBtn1.checked = true;
}else{
oBtn1.checked = false;
}
}
}
</script>

</body> </html>
jQuery代碼： <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(ev){
$('INPUT[name=id]').attr('checked',$('#btn1').prop('checked'));
});
$('INPUT[name=id]').click(function(ev){
$('#btn1').attr('checked',
$('INPUT[name=id]:checked').length == $('INPUT[name=id]').length);
});
});
</script>

轉載于:https://www.cnblogs.com/zhangyu00/p/6686699.html

總結

以上是生活随笔為你收集整理的JSjQuery全选反选父项子项联动多选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python简易木马（一）
下一篇： PuTTY 设置Serial(ubunt