ユーザーが親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
});
});
どんな助けでもありがたいです。ありがとう
同じことを実現するには、いくつかの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]
コメントを追加