当用户在父级li中选中复选框时,我想选中一个复选框。
所以这是我的html代码。
<ul>
<li class="parent3 child2" id="3">
<span style="padding-left:60px;">
<i aria-hidden="true" class="icon-minus"></i>
Civil
</span>
<div>
<label class="viewList">
<input type="checkbox" value="49" name="view[]">
View
</label>
<label class="downList">
<input type="checkbox" value="49" name="down[]">
Download
</label>
<label class="upList">
<input type="checkbox" value="49" name="update[]">
Update
</label>
</div>
<ul class="submenu" style="display: block;">
<li class=" child3" id="4">
<span style="padding-left:80px;">test1</span>
<div>
<label class="viewList">
<input type="checkbox" value="60" name="view[]">
View
</label>
<label class="downList">
<input type="checkbox" value="60" name="down[]">
Download
</label>
<label class="upList">
<input type="checkbox" value="60" name="update[]">
Update
</label>
</div>
</li>
</ul>
</li>
</ul>
现在我要选中子复选框的复选框。
所以我试过下面的代码。
$(document).ready(function(){
$('.viewList input').change(function () {
alert('hello')
if ($(this).attr("checked")) {
$(this).closest('li').children('.submenu .viewList input').prop( "checked", true );
alert('hello')
}
// not checked
});
});
这也是我尝试过的jsfiddle。
任何帮助将不胜感激。谢谢
您需要使用几个jQuery函数来实现相同的功能。例如parents()
,find
等...
您更新的代码应如下所示。
$(document).ready(function(){
$('.viewList input').change(function () {
if($(this).parents('li').size()>0) {
var parentLi=$(this).parents('li');
if(parentLi.find('ul').size()>0) {
var childInput=parentLi.find('ul').find('.viewList input');
if($(this).is(":checked")){
childInput.prop('checked','checked');
} else {
childInput.removeAttr('checked');
}
}
}
});
});
更新了jsFiddle链接:https ://jsfiddle.net/xf6Lfu0v/12/
我们需要做的是,当我们首先单击复选框时,将检查是否有
LI
父级,如果是,则将查找其中是否有子级UL。如果是,则选中/取消选中相应的输入。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句