Manipulating Check Boxes with JQuery

Question

<!DOCTYPE html>
<html>
<head>
    <head>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
        <link href= "jqueryui/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script>
        $(document).ready(function () {
            $("#date").datepicker();
            $("#slider1").slider({
                max:1000,
                min:0,
                value: 0,
                slide: function(event,ui){
                    $("#price").val(ui.value);
                    var valz = function(){
                        parseInt($("#banana").val())
                    }
                    if (valz() > $("#slider1").val()){
                        $("#banana").prop("checked",true);
                    }
                }
            });

            $( "#price" ).change(function(){
                $( "#slider1" ).slider("value", $(this).val())
                $("#price").val($(this).val());
            });
            var fTotal = 0;
            $('.fruit').click(function(){
                if (this.checked){
                    fTotal += parseInt($(this).val());
                    $( "#slider1" ).slider("value", fTotal )
                    $("#price").val(fTotal);
                }
                else {
                    fTotal -= parseInt($(this).val());
                    $( "#slider1" ).slider("value", fTotal )
                    $("#price").val(fTotal);
                };
            });
        });
            </script>
    </head>
<title>ProjectFreedom</title>
</head>
<body>
<div id = title>

<div><input type="text" id="date"></div>
<p>
<label for="price">Cost: £</label>
<input type="number" id="price" value="0" max="1000">
</p>
<div id="slider1"></div>
<form class="Fruit">
<input type="checkbox" id="banana" class="fruit" name="fruit" value= "25" >Banana<br>
<input type="checkbox" class="fruit" name="fruit" value="75">Apple<br>
<input type="checkbox" class="fruit" name="fruit" value="172">Melon<br>
<input type="checkbox" class="fruit" name="fruit" value="400">Leopard<br>
<input type="checkbox" class="fruit" name="fruit" value="328">Grimacing
</form>

Right, so I'm a bit stuck with this one. Very new to Javascript and programming but I've managed to concoct this for a project I'm working on.

Basically, I want the scroll bar value to add checks to the boxes based on the value, ie. when the scroll bar moves up, more and more checkboxes will become filled in. I'm trying to make it work for just one of the checkboxes (in this case banana) but I cannot seem to manage it. I've been working on it for hours and have done lots of research to get to this point but cannot go any further!!

score 0 · Accepted Answer · answered Sep 15 '14 at 01:51

There's a lot of ambiguity with what you're trying to accomplish, but I hope the following gets you over edge.

Live Demo

JS

//Shorthand for $(document).ready(function(){
$(function () {

    var fruit = [],
        //Calls to jQuery $(...) are expensive! make sure you cache these calls when appropriate
        $price = $('#price'),
        $slider = $('#slider1'),
        $fruit = $('.fruit'), 
        $date = $('#date'); 

    $date.datepicker();

    //Iterate over every element with the class fruit (these should all be inputs)
    $fruit.each(function(index, item){
        //convert to a jQuery object
        var checkbox = $(item); 
        //push the checkbox into the fruit array as an object with its value
        //parseInt defaults to base 8 so be sure to specify base 10.
        fruit.push({ val: parseInt(checkbox.val(), 10), checkbox: checkbox}); 
    }); 

    $slider.slider({
        max:1000,
        min:0,
        value: 0,
        slide: function(event,ui){
            $price.val(ui.value);

            $.each(fruit, function(index, item){
                //not sure what you want to compare here? event.clientX or ui.value
                item.checkbox.prop("checked", item.val > ui.value);
            }); 
        }
    });

    //I did not validate that any of the below is working correctly. 
    //Again, I'm not 100% positive what you're ultimate goals are.  
    $price.change(function(){
        $slider.slider("value", $(this).val())
        $price.val($(this).val());
    });

    var fTotal = 0;
    $fruit.click(function(){
        if (this.checked){
            fTotal += parseInt($(this).val(), 10);
            $slider.slider("value", fTotal )
            $price.val(fTotal);
        }
        else {
            fTotal -= parseInt($(this).val(), 10);
            $slider.slider("value", fTotal )
            $price.val(fTotal);
        };
    });
});

HTML

<div>
    <div><input type="text" id="date" /></div>
    <p>
        <label for="price">Cost: £</label>
        <input type="number" id="price" value="0" max="1000" />
    </p>
    <div id="slider1"></div>
    <form class="Fruit">
        <input type="checkbox" id="banana" class="fruit" name="fruit" value= "25" />Banana<br />
        <input type="checkbox" class="fruit" name="fruit" value="75" />Apple<br />
        <input type="checkbox" class="fruit" name="fruit" value="172" />Melon<br />
        <input type="checkbox" class="fruit" name="fruit" value="400" />Leopard<br />
        <input type="checkbox" class="fruit" name="fruit" value="328" />Grimacing
    </form>
</div>

A question on your answer: Just wondering where it's documented that parseInt defaults to 8 for the radix? As far as I knew the radix when not specified is determined using a heuristic. — Paul, Sep 15 '14 at 03:36
The project is now en route - thank you so much for your time, it's really appreciated. I'll need to make some changes so I can achieve the final destination but just the information alone is gold! Thanks again! — HenryDavidTHROW, Sep 15 '14 at 03:55
@Paul - I think you're right, it defaults to 8 when the [leading number is 0](http://stackoverflow.com/a/5600374/402706). At some point this burned me, so now I always specify the radix explicitly. — Brandon Boone, Sep 15 '14 at 10:57

Manipulating Check Boxes with JQuery

1 Answers1