单击复选框，选中其他复选框jquery

我有以下代码。结构/类别等是固定的，不能更改。我必须用我所拥有的来工作

我想要的是，每次选中父li类为“零”的复选框时，li中紧跟其后的复选框也会更改为选中。在类为零的下一个li列表项之前，只保留这些li复选框。或者列表的末尾

我知道如果我能改变结构，在ul中包含兄弟姐妹，那会容易得多。但由于代码的显示方式，这是不可能的。（动态地）。 我一直在尝试通过在每个点击的li下显示li，并使用一个类0来确定是否正确，但有点困惑。。。提前谢谢

这是我的

HTML

---

类

.0级
和
.1级
中不存在元素，为什么在标签中使用
for=“zero”
？更新的FIDLE
<ul class="multiselect">
<li class="zero">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Boats (all)</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Tug</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Speed Boat</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Cruiser</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Cargo</span>
    </label>
</li>
<li class="zero">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Cars (all)</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Ford</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>Dodge</span>
    </label>
</li>
<li class="one">
    <label for="zero" title="">
        <input name="multiselect" type="checkbox" value="125" title="Boats (all)" aria-selected="true">
        <span>VW</span>
    </label>
</li>

var firstLevel = $('.multiselect');
var topLevel = firstLevel.find('.zero');
var subLevel = firstLevel.find('.one');


topLevel.find('input').on('click', function(){
    if ($(this).is(':checked')) {
       alert('checked');
       var list = $(this).closest('li').find('li);
       console.log(list);
       list.find("input[type='checkbox']")
        .prop('checked', this.checked);
    } else {
       alert('un-checked');

    };

});

function handleRelated(type, e){
    if(e.hasClass('one')){
        var check = (type == 'uncheck') ? 0 : 1;
        e.find("input[type='checkbox']").prop('checked', check);
        handleRelated(type, e.next());
    }
}

$('.multiselect input').on('click', function(){
    var li = $(this).closest('li');
    if(li.hasClass('zero')){
        if($(this).is(':checked')){
            handleRelated('check', li.next());
        }
        else{
            handleRelated('uncheck', li.next());
        }
    }
});