jquery标记值小于选中的值作为选中

时间:2012-11-12 23:12:47

标签: jquery

我有很多价格复选框,而我试图做的是以下

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

JsFiddle

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>
​

JQUERY

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

它会选择一些值,但它似乎不能正常工作。看看小提琴

4 个答案:

答案 0 :(得分:2)

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

将字符串转换为数字

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

<强> Check Fiddle

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

$(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/

答案 3 :(得分:0)

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

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