jquery - jquery将小于选定值的值标记为选中

Question

我有许多价格复选框，我尝试做的是以下

当有人选择价格/复选框时，它会自动检查小于所选值的值。

提琴手

HTML

<div class="prices">
    <input type="checkbox" value="59.99" />59.99
    <input type="checkbox" value="69.99" />69.99
    <input type="checkbox" value="79.99" />79.99
    <input type="checkbox" value="89.99" />89.99
    <input type="checkbox" value="99.99" />99.99
    <input type="checkbox" value="124.99" />124.99
    <input type="checkbox" value="149.99" />149.99
    <input type="checkbox" value="199.99" />199.99
    <input type="checkbox" value="200.00" />200.00
</div>
​

查询

$('.prices input[type=checkbox]').live('click', function (){
     console.log(this);
     $(this).attr('checked', true);
     var chosenPrice = $(this).val();
     console.log(chosenPrice);
     $(".prices input").filter(function(){ 
     return  $(this).attr("value") <=chosenPrice}).attr('checked', true);
});​

它选择了一些值，但它似乎没有按应有的方式工作。看看小提琴

Answer 1

代码的修改部分。.您只需要在检查当前复选框时检查其他复选框。。还需要使用使用

parseFloat()或者Number()

$('.prices input[type=checkbox]').live('click', function() {
    console.log(this);
    var $this = $(this) ;
    if ($this.is(':checked')) {
        var chosenPrice = $this.val();
        console.log(chosenPrice);
        $(".prices input").filter(function() {
            return parseFloat($(this).attr("value")) <= chosenPrice
        }).prop('checked', true);
    }
});​

检查小提琴

Answer 2

该脚本正在比较字符串。尝试修改该值以使其成为数字。

var chosenPrice = Math.floor($(this).val());

http://jsfiddle.net/ppw5z/2/

Answer 3

$(this).val()返回一个字符串，而不是数字，因此您实际上并没有比较数字。

将您的值转换为浮点数，它应该可以工作：

$(document).on('click', '.prices input[type=checkbox]', function() {
    var $this = $(this);
    var value = parseFloat($this.val());

    $this.siblings().andSelf().prop('checked', false).filter(function() {
        return parseFloat($(this).val()) <= value;
    }).prop('checked', true);
});​

演示：http: //jsfiddle.net/ppw5z/6/

Answer 4

您的代码的问题是正在完成的比较是作为字符串而不是作为浮点数完成的。您可以使用以下代码解决此问题：

$('.prices input[type=checkbox]').live('click', function (){
     var chosenPrice = $(this).val();
     $(".prices input").filter(function(){ 
         return parseFloat($(this).val()) <= parseFloat(chosenPrice)).attr('checked', true);
});​

演示： JSFiddle