on click of check box, check other checkboxs jquery

Question

I have the following code. The structure / classes etc is fixed and cannot be changed. I have to work with what I have.

What I'm after is each time a check box with a parent li class of 'zero' is checked - the checked boxes within the li's that follow it also get changed to checked. Only those li check boxes up until the next li list item with a class of zero. Or the end of the list.

I know it would be a lot easier if I could change the structure and have siblings contained within a ul. But this is not possible due to the way the code gets displayed. (dynamically). Been trying to work if out by first displaying the li's under each clicked li with a class of zero but a bit stumped... Thanks in advance!

here's my FIDDLE

HTML

<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>

JS

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');

    };

});

Answer 1

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());
        }
    }
});

http://jsfiddle.net/9m2Yq/7/