checkbox 子级父级联动

最新推荐文章于 2021-08-11 10:25:43 发布

sujiao666

最新推荐文章于 2021-08-11 10:25:43 发布

阅读量913

点赞数

分类专栏：前端js 文章标签： checkbox 父级取消子级全部取消子级选中一个父级默认选中

本文链接：https://blog.csdn.net/u013195452/article/details/77251725

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.点击父级取消，子级全部取消；
2.点击任意一个子级checked，父级自动checked；
3.里面的value的值和内容自己根据情况修改，我这里是从后台拿到的数据；
<div class="checkWarp cWarpleft">
<input type="checkbox" name="" class="fuji checkSource" value="" />
<span class="fujiName_Source"></span>
<ul class="cWarpleftParent">
<li><i></i><input type="checkbox" class="ziji checkSource" value="'+L2Source[i].id+'" />'+L2Source[i].name+'</li>
<li><i></i><input type="checkbox" class="ziji checkSource" value="'+L2Source[i].id+'" />'+L2Source[i].name+'</li>
<li><i></i><input type="checkbox" class="ziji checkSource" value="'+L2Source[i].id+'" />'+L2Source[i].name+'</li>
</ul>
</div>
js:
$("body").find('.checkWarp .fuji').click(function (event) {
event.stopPropagation();
var isfuji_checked = $(this).is(':checked');
if (isfuji_checked == true) {
} else{
$(this).parents('.checkWarp').children('ul').children('li').children('.ziji').prop("checked",false);
$("body .cWarprightParent").find(".ziji").each(function(index){
if($(this).val()=="3"){
$(this).prop("checked",true);
$(this).prop("disabled",true);
}
})
}
})
$('.checkWarp .ziji').click(function (event) {
event.stopPropagation();
var isziji_checked = $(this).is(':checked');
if (isziji_checked == true) {
$(this).parents('.checkWarp').children('.fuji').prop("checked",true);
} else{}
})