在多个选中的复选框上运行javascript

时间:2016-08-22 15:49:15

标签: javascript jquery html checkbox

您好我正在编写一个Web应用程序,根据用户检查的内容计算数字。

你可以看到它here

如果您转到该链接,您可以看到某人将首先选中一个复选框并从下拉列表中输入一个值并输入2值以获得输出。

我需要帮助的是能够一次计算多个复选框的值。

现在,即使选择了多个,我也只能一次计算checkbox个值。所以基本上我需要帮助尝试计算如何一次计算多个checkbox

我在我的javascript文件中使用了if语句但是没有给我我想要的结果。

4 个答案:

答案 0 :(得分:0)

如果只是

,请删除Else
$(document).ready(function(){   
function check(){
    if($('#checkbox1').is(':checked')){
        var pokemonCount = parseInt($("#pokecount1").val());
        var candyCount = parseInt($("#candycount1").val());
        var reqCandy  =  parseInt($("#dropdown1 :selected").val());
        var evolveAmount = 0;

        evolveAmount =  Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
        $("#p1").html(evolveAmount);
        }
    if($('#checkbox2').is(':checked')){
        var pokemonCount2 = parseInt($("#pokecount2").val());
        var candyCount2 = parseInt($("#candycount2").val());
        var reqCandy2  =  parseInt($("#dropdown2 :selected").val());
        var evolveAmount2 = 0;

        evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
        $("#p2").html(evolveAmount2);
        }
    if ($('#checkbox3').is(':checked')){
        var pokemonCount3 = parseInt($("#pokecount3").val());
        var candyCount3 = parseInt($("#candycount3").val());
        var reqCandy3  =  parseInt($("#dropdown3 :selected").val());
        var evolveAmount3 = 0;

        evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
        $("#p3").html(evolveAmount3);
        }
    }
$("#compute").click(function(){
    check()
});

});

答案 1 :(得分:0)

您已使用if(1.isChecked){ } if(2.isChecked){ } ,因此如果选中第一个复选框,则会运行该代码并停止。你需要一系列if块:

not in  ('Completed', 'Closed', 'Resolved')

答案 2 :(得分:0)

您在代码中使用else if语句,这意味着只能执行3个if语句中的一个语句的代码。更多信息here

您需要使用简单的if语句替换它们,如下所示:

$(document).ready(function(){   
    function check(){
        if($('#checkbox1').is(':checked')){
            var pokemonCount = parseInt($("#pokecount1").val());
            var candyCount = parseInt($("#candycount1").val());
            var reqCandy  =  parseInt($("#dropdown1 :selected").val());
            var evolveAmount = 0;

            evolveAmount =  Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
            $("#p1").html(evolveAmount);
            }
        if($('#checkbox2').is(':checked')){
            var pokemonCount2 = parseInt($("#pokecount2").val());
            var candyCount2 = parseInt($("#candycount2").val());
            var reqCandy2  =  parseInt($("#dropdown2 :selected").val());
            var evolveAmount2 = 0;

            evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
            $("#p2").html(evolveAmount2);
            }
        if ($('#checkbox3').is(':checked')){
            var pokemonCount3 = parseInt($("#pokecount3").val());
            var candyCount3 = parseInt($("#candycount3").val());
            var reqCandy3  =  parseInt($("#dropdown3 :selected").val());
            var evolveAmount3 = 0;

            evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
            $("#p3").html(evolveAmount3);
            }
        }
    $("#compute").click(function(){
        check()
    });

});

答案 3 :(得分:0)

只需删除else if语句,仅针对IF进行更改。但我不得不说这个解决方案不是那么可扩展,对于一个大型应用程序可能会变成一场噩梦。

我建议您尝试使用 $(“input:checked”)。each(function(){}); 如果您不想存储它并只显示客户端上的值避免进一步的问题和糟糕的代码根据您的想法,每当您想要实现新的表单标签时,您每次都需要复制并粘贴这些IF。

$(document).ready(function(){   
    function check(){
        if($('#checkbox1').is(':checked')){
            var pokemonCount = parseInt($("#pokecount1").val());
            var candyCount = parseInt($("#candycount1").val());
            var reqCandy  =  parseInt($("#dropdown1 :selected").val());
            var evolveAmount = 0;

            evolveAmount =  Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
            $("#p1").html(evolveAmount);
            }
        if($('#checkbox2').is(':checked')){
            var pokemonCount2 = parseInt($("#pokecount2").val());
            var candyCount2 = parseInt($("#candycount2").val());
            var reqCandy2  =  parseInt($("#dropdown2 :selected").val());
            var evolveAmount2 = 0;

            evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
            $("#p2").html(evolveAmount2);
            }
       if ($('#checkbox3').is(':checked')){
            var pokemonCount3 = parseInt($("#pokecount3").val());
            var candyCount3 = parseInt($("#candycount3").val());
            var reqCandy3  =  parseInt($("#dropdown3 :selected").val());
            var evolveAmount3 = 0;

            evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
            $("#p3").html(evolveAmount3);
            }
        }
    $("#compute").click(function(){
        check()
    });

});