根据复选框对jQuery进行乘法运算并下拉选择

Question

我需要根据用户选择一个下拉选项并从我的注册表中的复选框中进行选择来进行数学计算。

我有一个标记为“所需列表类型”的下拉选项，其中包含两个选项：

• 精选（£25每月每个区域）
• 标准（每个区域每月£10）

在此下拉菜单下方，我们还有3个复选框项目，标记为“您服务哪个区域/区域？”：

• 奥特林厄姆
• 黑尔
• 特卖

用户从“所需列表类型”中选择一个选项，并从“您服务哪个区域/区域”进行选择之后， 我想在提交按钮之前向他们显示总价。

计算方式是（“需要的列表类型”）乘以（“您服务的区域/区域？”的数量）

因此，如果用户选择“标准（每区域每月10英镑）”，然后勾选所有 3个复选框选项（Altrincham，Hale，Sale），我想显示一条消息，说“每月总费用为30英镑”。 这是10英镑乘以3的结果。

如果用户选择“精选（每区域每月25英镑）”，然后勾选任何 2个复选框选项（Altrincham，Sale），我想显示一条消息，说“每月总费用为50英镑”。 这将是25英镑乘以2的结果。

如果用户选择“精选（每区域每月25英镑）”，然后勾选任何 1个复选框选项（硬朗），我想显示一条消息，说“总费用为每月25英镑”。 这将是25英镑乘以1的结果。

我将如何在jQuery中进行操作？

谢谢

Answer 1

解决该问题的方法是具有一个将所需的所有值读入不同变量的函数。

然后检查每个变量的期望值并进行相应的计算。 Yoy将结果存储在另一个变量中。

最后，您将使用变量设置UI元素的值。

您如何触发此功能？

可以基于按下按钮或更改元素的值来完成。 在第一种情况下，您将使用$（）。click（function（）{...}），在第二种情况下，将使用$（）。change（function（）{...}）。

要从元素中获取值，请使用$（）。val（）并进行设置，但必须在函数（val（newValue））中传递值。

总结：

$(document).ready(function(){

function doCalculations(){
    var input1 = $(input1selector).val();
    ...
    var result = 0;
    if( ){
       ...
       result = ...;
    }else if() {
       ...
       result = ...;
    }else{
       ...
       result = ...;
    }

    $(uiOutputSelector).val(result);
};

$(calcButtonSelector).click(function(){
    doCalculations();
});


});

Answer 2

您不必担心检查了哪个城市，而只关心其中的几个。

您可以在每个复选框的三个复选框上监听change事件，可以在计数被选中时增加计数，而在未选中时减少计数。

修改计数后，您可以调用一个函数，如果总数大于1，则将呈现总数；如果总数为0，则将隐藏/删除总数。

当然，我不会为您编写任何代码，因为我不知道您的标记是什么样子以及您可能已经编写了什么JavaScript代码。