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>

是的，所以我对这个问题感到困惑。 Javascript和编程都是新手，但我已经设法为我正在开发的项目编写了这个。

基本上，我希望滚动条值根据值将检查添加到框中，即。当滚动条向上移动时，将填充越来越多的复选框。我正在尝试使其仅适用于其中一个复选框（在本例中为banana）但我似乎无法管理它。我已经做了几个小时的工作，已经做了很多研究，以达到这一点，但不能再进一步！

Answer 1

您尝试完成的内容存在很多模糊之处，但我希望以下内容能让您超越自我。

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

使用JQuery操作复选框

1 个答案: