Fatal编程技术网
  • javascript/
  • 当用户选中/取消选中复选框时，如何使用Javascript进行加减价格？

当用户选中/取消选中复选框时，如何使用Javascript进行加减价格？

javascript

当用户选中/取消选中复选框时，如何使用Javascript进行加减价格？,javascript,Javascript,我有一个清单的复选框与不同的价格为所有项目。如果用户选择了多个项目，我如何实现功能？如果取消选择，我如何将价格添加到总计或删除？在javascript中 我是javascript新手，所以如果我的代码不对，请原谅 let pricesList=new Array（）； 价格清单[“全部”]=200； 价格列表[“js框架”]=100； 价格清单[“js libs”]=100； 价格清单[“快递”]=100； 价格列表[“节点”]=100； 价格清单[“构建工具”]=100； 价格清单[“npm

我有一个清单的复选框与不同的价格为所有项目。如果用户选择了多个项目，我如何实现功能？如果取消选择，我如何将价格添加到总计或删除？在javascript中

我是javascript新手，所以如果我的代码不对，请原谅

let pricesList=new Array（）；
价格清单[“全部”]=200；
价格列表[“js框架”]=100；
价格清单[“js libs”]=100；
价格清单[“快递”]=100；
价格列表[“节点”]=100；
价格清单[“构建工具”]=100；
价格清单[“npm”]=100；
const activitycheckbox=document.queryselectoral（“输入[type=checkbox]”）；
函数getActivityPrices（用户输入）{
//选中所有复选框
//循环通过复选框列表
for（设i=0；i


登记参加活动
主要会议-200美元
JavaScript框架研讨会-周二上午9点至下午12点，100美元
JavaScript库研讨会-周二下午1点到4点，100美元
快速工作坊-星期二上午9点至下午12点，100美元
Node.js研讨会-周二下午1点至4点，100美元
建造工具研讨会-星期三上午9点至下午12点，100美元
npm研讨会-周三下午1点至4点，100美元


HTML


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="printIt"></div>
  <input type="checkbox" value="200" onchange="calculateTotal()"> All
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> js-frameworks
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> js-libs
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> express
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> node
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> build-tools
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> npm
  <br>
</body>
</html>



<h1>Purchase</h1>
<p>Select Item(s):</p>
<ul id='available-items'></ul>
<h2>Ledger</h2>
<ul id='ledger'></ul>
<table>
  <tr>
    <th>Total:</th>
    <td><input disabled id='total' value='0.00'/></td>
  </tr>
</table>




JS-Bin
全部的


js框架


js libs


表达


节点


构建工具


npm




JAVASCRIPT


var pricesList = [];
pricesList["all"] = 200;
pricesList["js-frameworks"] = 100;
pricesList["js-libs"] = 100;
pricesList["express"] = 100;
pricesList["node"] = 100;
pricesList["build-tools"] = 100;
pricesList["npm"] = 100;

var activityCheckBoxes = document.getElementsByTagName("input");

function getActivityPrices() {
  var price = parseInt(0);
  for (var i = 0; i < activityCheckBoxes.length; i++) {
    if (activityCheckBoxes[i].checked) {
      price += parseInt(activityCheckBoxes[i].value);
    }
  }
  return price;
}

function calculateTotal() {
  var total = getActivityPrices();
  var printIt = document.getElementById("printIt");
  console.log(total);
  printIt.innerHTML = 'Your Total is $' + total;

}



var pricesList=[]；
价格清单[“全部”]=200；
价格列表[“js框架”]=100；
价格清单[“js libs”]=100；
价格清单[“快递”]=100；
价格列表[“节点”]=100；
价格清单[“构建工具”]=100；
价格清单[“npm”]=100；
var activitycheckbox=document.getElementsByTagName（“输入”）；
函数getActivityPrices（）{
var-price=parseInt（0）；
对于（变量i=0；i
下面是一个简单的示例，介绍如何解决此问题。
按
运行代码段
对其进行测试



函数计算（）{
const inputs=document.querySelectorAll（“输入[type=checkbox]”）；
设结果=0；
for（设i=0；i


总计：0
Js框架


JS Libs
您有很多错误-请查看这里的修订版本。您的价格列表应该是一个对象，而不是一个数组



let pricesList={}；
价格清单[“全部”]=200；
价格列表[“js框架”]=100；
价格清单[“js libs”]=100；
价格清单[“快递”]=100；
价格列表[“节点”]=100；
价格清单[“构建工具”]=100；
价格清单[“npm”]=100；
const main=document.getElementById（'main'）；
const printIt=document.getElementById（'printIt'）；
对于（价格表中的项目）{
设框=“”+
''+项目+'-价格：$'+价格列表[项目]+''
main.innerHTML=main.innerHTML+box；
}
const activitycheckbox=document.queryselectoral（“输入[type=checkbox]”）；
函数getActivityPrices（用户输入）{
//选中所有复选框
设total=0；
//循环通过复选框列表
for（设i=0；i


正文{
字体大小：1.3rem；
字体系列：arial；
}
#打印{
边缘顶部：15px；
}


动态方法，根据需要进行更改

Javascript


var availableItems = getAvailableItems(),
    ledger = getLedger(),
    total = getTotal();

getStore().map(function(item) {
    var li = document.createElement('li'),
        checkbox = document.createElement('input'),
        label = document.createElement('label'),
        ledgerItem = document.createElement('li'),
        _item = item;

    ledgerItem.textContent = item.name+' costs $'+item.price;
    ledgerItem.classList.add(item.name.replace(/[^a-z\d-_]/gi, ''));

    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            ledgerItem.rel = item;
            ledger.appendChild(ledgerItem);
        } else {
            ledger.removeChild(ledgerItem);
        }
    });
    checkbox.addEventListener('change', setTotal);

    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(' '+item.name));
    li.appendChild(label);
    availableItems.appendChild(li);
});

function setTotal() {
    var total = 0;

    Array.from(getLedgerItems()).forEach(item => total += item.rel.price);
    getTotal().value = '$'+total.toFixed(2);
}

function getStore() {
    return [
        {name: 'dog', price: 200.00},
        {name: 'cat', price: 100.00},
        {name: 'elephant', price: 5000.00},
        {name: 'bird', price: 0.99},
        {name: 'shark', price: 2500.00},
        {name: 'prairie dog', price: 5.00},
    ];
}

function getAvailableItems() {
    return document.getElementById('available-items');
}

function getAvailableItemsList() {
    return getAvailableItems().querySelectorAll('li');
}

function getLedger() {
    return document.getElementById('ledger');
}

function getLedgerItems() {
    return getLedger().querySelectorAll('li');
}

function getTotal() {
    return document.getElementById('total');
}


CSS


#total {
  width: 80px;
  text-align: right;
  padding: 3px;
}


HTML


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="printIt"></div>
  <input type="checkbox" value="200" onchange="calculateTotal()"> All
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> js-frameworks
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> js-libs
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> express
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> node
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> build-tools
  <br>
  <input type="checkbox" value="100" onchange="calculateTotal()"> npm
  <br>
</body>
</html>



<h1>Purchase</h1>
<p>Select Item(s):</p>
<ul id='available-items'></ul>
<h2>Ledger</h2>
<ul id='ledger'></ul>
<table>
  <tr>
    <th>Total:</th>
    <td><input disabled id='total' value='0.00'/></td>
  </tr>
</table>



购买
选择项目：


    
分类账簿

      
总数：

      

      在单击时运行的复选框中添加一个事件监听器。我也尝试过，我试图实现的是实时计算，因此如果用户选择/取消选择总价变化<代码>复选框[1]。addEventListener（“单击”，e=>{DisableBox（复选框[1]，复选框[5]，复选框[3]）；calculateTotal（）；}）这必须是纯javascript吗？你能用HTML和Javascript来实现吗？你能使用JQuery吗？是的，纯javascript实际上是我为获得技术学位证书而建立的一个项目。你能展示一下你的html吗？谢谢你的帮助，我看到你的代码正在做我想要的事情，但是当我试着实现我的总数时，你的总数是$Nan，当你说“尝试实现”时，你是什么意思？你在哪里测试过这个，什么浏览器？代码笔这是查看你的代码笔的链接，我再次看到使用ChromeTry的$values很好，拜托，我也没有在chrome中为我工作