當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSjQuery全选反选父项子项联动多选框
生活随笔
收集整理的這篇文章主要介紹了
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>
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