使用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. 对于Javascript和程序设计来说，这是一个非常新的事物，但是我已经为我正在研究的项目成功地做到了这一点。

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!! 我已经为此工作了几个小时，并且已经做了很多研究以达到这一点，但是不能再进一步了！

Answer 1

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 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 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 个解决方案

解决方案1
0 已采纳 2014-09-15 01:51:48

使用JQuery操纵复选框

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-15 01:51:48

解决方案1
0 已采纳 2014-09-15 01:51:48