Question

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

我所追求的是每次复选框的父级别为＆＃39;零＆＃39;已选中 - 其后面的复选框也会更改为已选中。只有那些li复选框，直到下一个列表项为零。或者列表的末尾。

我知道如果我能改变结构并让兄弟姐妹包含在ul中会更容易。但由于代码的显示方式，这是不可能的。（动态地）。一直试图工作，如果出来的话首先在每个点击的李下面显示一个零但有点难过的李...提前谢谢！

这是我的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/

点击复选框，检查其他复选框jquery

1 个答案: