Question

我在检查复选框时显示其值并在取消选中时删除其值时遇到了一些麻烦。在此之前，我添加了一个下拉菜单和带有报价表格值的单选按钮。我现在已经为此复选框组添加了值，但是当在“totalPrice”DIV的末尾添加总金额时，它不会添加到设备的复选框中。以下是Javascript和HTML代码：

    tbBroker's Columns  -  Agency's Columns
    BrokerCode          -  AgencyNumber
    BusinesssName       -  AgencyName
    City                -  City
    Email               -  EmailAddress

我在下面的JSFiddle中放置了Javascript和HTML的所有信息： https://jsfiddle.net/dqx5yLz7/

Answer 1

我为你的问题提供了jQuery解决方案，我希望它有所帮助。

＆＃13;

$(".checkbox").click(function(){
    var favorite = [];
    $.each($('input[type="checkbox"]:checked'), function() {
      favorite.push($(this).val());
      console.log(favorite);
    });

    var total = 0;
    for (var i = 0; i < favorite.length; i++) {
      total += favorite[i] << 0;
    }
    $('#total').html(total);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="col-md-2 control-label" for="submit">18 Inch Subwoofer</label>
  <div class="col-md-4">
    <input id="checkbox" name="Subwoofer" realname="18 Inch Subwoofer" type="checkbox" value="10"/>
  </div>
</div>
<div class="checkbox">
  <label for="submit">LED Par Cans</label>
  <div>
    <input id="checkbox" name="LED" type="checkbox" realname="LED Par Cans" value="5"/>
  </div>
</div>
<div class="checkbox">
  <label for="submit">Smoke Machine</label>
  <div >
    <input id="checkbox" name="Smoke Machine" realname="Smoke Machine"type="checkbox" value="5"/>
  </div>
</div>

<div>
  <label for="name">Totalprice: </label>
 
    <p id="total"></p>

</div>

＆＃13;

Answer 2

首先，删除for内的中断。这只会返回第一个值。

其次，您可以使用element.checked检查其是否已选中并添加其值。

第三，您正在访问document.forms["quote"];，但没有标识为quote的表单

同样getEventDuration()，getEventSuburb()这些功能在你的小提琴中缺失。我假设它们与当前情景无关，并对它们进行了评论。

您可以尝试这样的事情：

JSFiddle

＆＃13;

//ARRAY
var eventEquipmentArray = new Array();
eventEquipmentArray["15 Inch Speakers"] = 5;
eventEquipmentArray["18 Inch Subwoofer"] = 10;
eventEquipmentArray["LED Par Cans"] = 5;
eventEquipmentArray["Smoke Machine"] = 5;
eventEquipmentArray["Moving Head"] = 10;
eventEquipmentArray["4 Gun Laser System"] = 5;
eventEquipmentArray["Red Gun Laser System"] = 5;
eventEquipmentArray["1500W Strobes"] = 10;
eventEquipmentArray["Mirror LED Lighting"] = 5;

//CHECKBOX - EVENT EQUIPMENT
function getEventEquipment() {
  var EventEquipment = 0;
  var theForm = document.forms["quote"];
  var selectedEquipment = theForm.elements["selectedEquipment"];

  for (var i = 0; i < selectedEquipment.length; i++) {
  	if(selectedEquipment[i].checked){
    	EventEquipment += eventEquipmentArray[selectedEquipment[i].value] || 0;
    }
  }

  return EventEquipment;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  //var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();
  var totalPrice = getEventEquipment();
  var totalPriceDIV = document.getElementById("totalPrice");
  totalPriceDIV.innerText = "Total: $ " + totalPrice;
}

＆＃13;

<form id="quote">
  <p>
    <label>
      <input type="checkbox" name="selectedEquipment" value="15 Inch Speakers" id="selectedEquipment_0" onChange="getTotals()" /> 15" Speakers</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="18 Inch Subwoofer" id="selectedEquipment_1" onChange="getTotals()" /> 18" Subwoofer</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="LED Par Cans" id="selectedEquipment_2" onChange="getTotals()" /> LED Par Cans</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Smoke Machine" id="selectedEquipment_3" onChange="getTotals()" /> Smoke Machine</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="250W Moving Head" id="selectedEquipment_4" onChange="getTotals()" /> 250W Moving Head</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Mirror LED Lighting" id="selectedEquipment_5" onChange="getTotals()" /> Mirror LED Lights</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="4 Gun Laser System" id="selectedEquipment_6" onChange="getTotals()" /> 4 Gun Laser Light</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="Red Gun Laser System" id="selectedEquipment_7" onChange="getTotals()" /> Red Laser Star Light</label>
    <br />
    <label>
      <input type="checkbox" name="selectedEquipment" value="1500W Strobes" id="selectedEquipment_8" onChange="getTotals()" /> 1500W Strobes</label>
    <br />
  </p>

  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>

</form>

＆＃13;

Answer 3

在for循环内的函数(score, time)中，您需要添加条件以检查是否选中了复选框并删除break语句。修改后的代码如下：

getEventEquipment()

还要确保表单的ID已设置为function getEventEquipment() { var EventEquipment = 0; var theForm = document.forms["quote"]; var selectedEquipment = theForm.elements["selectedEquipment"]; for(var i = 0; i < selectedEquipment.length; i++) { if (selectedEquipment[i].checked) { EventEquipment = parseInt(EventEquipment, 10) + parseInt(eventEquipmentArray[selectedEquipment[i].value], 10); } } return EventEquipment; }。

如果您在计算中获得NaN，请检查表格中的数组和值详细信息。

Javascript价格计算器问题（复选框）

3 个答案: