个人中心
gpt4 book ai didi

javascript - 使用 JQuery 操作复选框

转载 作者：行者123 更新时间：2023-11-28 07:57:56 25 4
gpt4 key购买 nike 

<!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 和编程非常陌生，但我已经成功地为我正在从事的项目编写了这个。

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

最佳答案

您想要完成的任务有很多含糊之处，但我希望以下内容能让您克服困难。

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>

关于javascript - 使用 JQuery 操作复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25838772/

25 4 0
文章推荐： c++ - 外部 header 中的未识别数据类型
文章推荐： javascript - 我的 jquery 菜单焦点功能不工作
文章推荐： c++ - 在 Linux 中动态排列应用程序窗口
文章推荐： javascript - JQuery，CSS 全宽元素不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com