jQuery在两个单独的div中按类名称选择复选框

Question

我在这里尝试做的事情很简单： http : //jsfiddle.net/393Yk/

我有两列，每列基本上都有一个嵌套的无序列表的复本，其中包含许多复选框。

当我选中并取消选中左侧列中的复选框时，右侧列中的相应复选框也应选中并取消选中。

想法实际上是隐藏右侧的元素，直到在左侧选择它们为止，因此右侧应仅显示所选内容（并非所有元素）。

我一次要迈出这一步，但在完成一次之后，获取右侧复选框以选中或取消选中却有问题。

因此，它第一次起作用，但是第一次之后就没有作用。

解决检查和取消检查的代码在这里：

$('.mod-left .wf-check').attr('checked', false).change(function(){

    var sel = $(this).data("val");

    if( $(this).is(":checked") ){

        console.log("Checked " + sel);

        $('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', true);

    } else {

        console.log("Unchecked " + sel);

        $('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', false);

    }
});

有人可以帮助我选择复选框并按班级名称进行操作吗？

谢谢。

Answer 1

以下似乎有效（即不使用jquery attr（）函数）。

if( $(this).is(":checked") ){
    $('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = true;
} else {
    $('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = false;
}

当然，将代码编写为：

$('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = $(this).is(':checked');

Answer 2

改变你在哪里

$('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked',...);

至

$('.mod-right input.wf-check-' + sel + '[type=checkbox]').prop('checked',...);

小提琴