根据复选框和下拉选择与 jQuery 进行乘法运算答案

【问题标题】：Do multiplication with jQuery based on checkboxe and drop down selections根据复选框和下拉选择与 jQuery 进行乘法运算
【发布时间】：2017-10-16 13:36:38
【问题描述】：

我需要根据用户在我的注册表单上选择下拉选项和复选框项目的选项进行数学计算。

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

精选（每个区域每月 25 英镑）
标准（每个区域每月 10 英镑）

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

奥特林厄姆
硬朗
出售

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

计算方法是（“所需的列表类型”）乘以（“您服务于哪些区域/区域？”）的数量

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

如果用户选择“精选（每个区域每月 25 英镑）”，然后勾选 ANY 2 个复选框选项（奥特林厄姆，销售）我想显示一条消息“总成本为 £每月50”。这将是 25 英镑乘以 2 的结果。

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

我将如何在 jQuery 中解决这个问题？

谢谢

【问题讨论】：

你应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容 清楚说明什么不起作用并提供Minimal, Complete, and Verifiable example。我建议阅读How to Ask 一个好问题。

标签： javascript jquery checkbox multiplication

【解决方案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();
});


});

【讨论】：

【解决方案2】：

你不关心检查了哪些城市，只关心有多少。

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

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

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

【讨论】：