2

整数値を持つ関連するチェックボックスがたくさんあります。私は次のような単純なロジックを取り込もうとしています:

  • ボックスにチェックを入れると、値が <= のすべてのボックスが自動的にチェックされます。
  • ボックスのチェックを外すと、値が > のすべてのボックスが自動的にチェックを外されます。

これは私が持っているもので、動作しますが、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);
            }
        }
    });
});
4

2 に答える 2

4

より高い値のチェックを外しているように、ロジックは奇妙に思えます。その後、すべてのチェックボックスをオフにして、必要な低いチェックボックスのみをチェックすることができます。これを念頭に置いて、以下は 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);
});

フィドルの例

于 2012-05-23T12:25:59.027 に答える
3

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);
});
于 2012-05-23T12:19:17.513 に答える