選中複選框 - 必須有比這更優雅的方式嗎？

Question

我有一大堆相關的複選框，與整數值。我試圖包含以下簡單的邏輯：

• 當您勾選一個框時，所有值爲< =的框應自動勾選。
• 當你勾去掉盒子，所有的值盒>應該得到自動取消選中。

這是我得到的，它的工作原理，但佔用十六行，看起來有點重複。有沒有更好的辦法？

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