jquery - 勾选复选框 - 一定有比这更优雅的方式吗？

Question

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

• 当您勾选一个框时，所有值 <= 的框都应自动勾选。
• 当您取消选中一个框时，所有具有值 > 的框都应该自动取消选中。

这就是我所拥有的，它有效，但占用了 16 行并且看起来有点重复。有没有更好的办法？

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

示例小提琴

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