Question

我有一堆相关的复选框，带有整数值。我试图包含以下简单的逻辑：

勾选方框时，所有值为＆lt; =的方框都应自动勾选。
当您取消选中一个方框时，所有方框的值都为＆gt;应该自动取消。

这就是我所拥有的，它有效，但占用十六行，看起来有点重复。还有更好的方法吗？

$('.chk_level').click(function(event){
    var this_val        = parseInt( $(this).val() );
    var this_is_checked = $(this).is(':checked');
    $('.chk_level').each(function(i,chk){
        var $chk = $(chk);
        if ( this_is_checked ){
            if ( parseInt( $chk.val() ) <= this_val ){
                $chk.attr('checked', true);
            }
        }else{
            if ( parseInt( $chk.val() ) > this_val ){
                $chk.attr('checked', false);
            }
        }
    });
});

Answer 1

您的逻辑似乎很奇怪，就好像您取消选中更高的值，然后您可以取消选中所有复选框，然后只检查所需的较低复选框。考虑到这一点，以下工作方式与OP示例相同：

$('.chk_level').click(function(e){
    var $el = $(this);
    $(".chk_level").prop("checked", false);
    var $chk = $(".chk_level").filter(function() {
        return parseInt($(this).val(), 10) <= parseInt($el.val(), 10);
    }).prop("checked", true);
});

Example fiddle

Answer 2

使用filter()并批量检查/取消选中元素会使代码缩短：

$(".chk_level").click(function() {
    var predicate, $this = $(this),
        this_val = parseInt($this.val(), 10),
        this_is_checked = $this.is(":checked");
    if (this_is_checked) {
        predicate = function() {
            return parseInt($(this).val(), 10) <= this_val;
        };
    } else {
        predicate = function() {
            return parseInt($(this).val(), 10) > this_val;
        };
    }
    $(".chk_level").filter(predicate).prop("checked", this_is_checked);
});

Ticking复选框 - 必须有一个比这更优雅的方式？

2 个答案: