从复选框和下拉选择选项中添加值

时间:2017-08-09 22:05:02

标签: javascript checkbox drop-down-menu add

我想使用JavaScript(无JQuery)添加复选框和下拉菜单中的值。

我的第一个问题是如何最好地做到这一点...我的代码如下:

第二个问题是使用匿名函数来做这个有缺点吗?

谢谢!

https://jsfiddle.net/Buleria28/4ysvgkz8/

HTML

<label class="checkbox" for="Checkbox1">
        <input value="50" type="checkbox" class="sum" > box 1
 </label>
 <label class="checkbox">
        <input value="50"  type="checkbox" class="sum" > box 2
  </label>
  <label class="checkbox">
        <input value="50"  type="checkbox" class="sum" > box 3
  </label>

    <br/><br/>

    <select id="select" name ="select">
        <option class="sum"></option>
        <option value="1" class="sum">option 1</option>
        <option value="2" class="sum">option 2</option>
        <option value="5" class="sum">option 3</option>
    </select>
    <br/><br/>

    Total: $<span id="payment-total">0</span>

的JavaScript

/*To get checkbox values*/

var inputs = document.getElementsByClassName('sum'),
total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var checkAdd = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + checkAdd;
    }
 }

/*To get select values*/
var dropdown= document.getElementById("select");

for(j=0; j<dropdown.options.length;j++){

    dropdown[j].onchange = function() {
       if (dropdown[i].options.checked){
       var selectAdd = dropdown.options[dropdown.selectedIndex].value;
      total.innerHTML = parseFloat(total.innerHTML) + selectAdd;
      } 
   }
 }

2 个答案:

答案 0 :(得分:0)

以下是关于select元素的JS的更正,我添加了内联评论,请检查它们是否澄清:

/*To get select values*/
var dropdown = document.getElementById("select");
dropdown.onchange = function() {
  var value = parseInt(this.value); // gets the selected value from "select" and tries to convert it to int
  if(!isNaN(value)) { // if conversion is OK, i.e. it was a number
    total.innerHTML = parseFloat(total.innerHTML) + value; // this line is copied from your previous code
  }
}

答案 1 :(得分:0)

我想指出的一些事情:

  • 使用addEventListener绑定事件处理程序

  • 你可以使用匿名函数,但是当你声明它并给它一个有意义的名字时它会更清楚

  • 不要在HTML元素中保留总和。将其保存在变量中,然后将其插入HTML。

我会这样做:

var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total = document.querySelector('#payment-total')
var checkboxesTotal = 0
var selectTotal = 0

checkboxes.forEach(function(input) {
  input.addEventListener('change', onCheckboxSelect)
})

select.addEventListener('change', onSelectChange)

function onCheckboxSelect(e) {
  var sign = e.target.checked ? 1 : -1
  checkboxesTotal += sign * parseInt(e.target.value, 10)
  renderTotal()
}

function onSelectChange(e) {
  var value = parseInt(e.target.value, 10)
  if (!isNaN(value)) {
    selectTotal = value
    renderTotal()
  }
}

function renderTotal() {
  total.innerHTML = checkboxesTotal + selectTotal
}
<label class="checkbox" for="Checkbox1">
    <input value="50" type="checkbox" class="sum"> box 1
  </label>
<label class="checkbox">
    <input value="50" type="checkbox" class="sum"> box 2
  </label>
<label class="checkbox">
    <input value="50" type="checkbox" class="sum"> box 3
  </label>


<br/>
<br/>

<select id="select" name="select">
    <option class="sum"></option>
    <option value="1" class="sum">option 1</option>
    <option value="2" class="sum">option 2</option>
    <option value="5" class="sum">option 3</option>
  </select>

<br/>
<br/> Total: $<span id="payment-total">0</span>