javascript - 检查所有/总和值 - 如何将跨度放在输入中

Question

我写了一些代码，用“toggle all”选项总结了复选框的所有值。一开始我只需要关于值的信息，但现在我需要在一个input元素中包含 sum，但它不起作用。

注意：我知道 ID 只能使用一次！我把两者都放了input，span以表明它适用于span而不适用于input.

// Shorter querySelectorAll that returns a real array.
function select(selector, parent) {
  return Array.from((parent || document).querySelectorAll(selector));
}

var inputs = select('.sum'),
  totalElement = document.getElementById('payment-total')

function sumUpdate() {
  totalElement.innerHTML = inputs.reduce(function(result, input) {
    return result + (input.checked ? parseFloat(input.value) : 0);
  }, 0).toFixed(2);
}

// Update the sums in function on input change.
inputs.forEach(function(input) {
  input.addEventListener("change", sumUpdate);
});

select(".checkAll").forEach(function(checkAll) {
  var targetFieldSet = document.getElementById(checkAll.getAttribute("data-target-set"));
  var targetInputs = select(".sum", targetFieldSet);

  // Update checkAll in function of the inputs on input change.
  targetInputs.forEach(function(input) {
    input.addEventListener("change", function() {
      checkAll.checked = input.checked && targetInputs.every(function(sibling) {
        return sibling.checked;
      });
    });
  });

  // Update the inputs on checkall change, then udpate the sums.
  checkAll.addEventListener("change", function() {
    targetInputs.forEach(function(input) {
      input.checked = checkAll.checked;
    });
    sumUpdate();
  });
});

function checkInput(text) {
  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><label><input type="checkbox" class="checkAll" data-target-set="setA"/> Check all Set A</label></p>
<fieldset id="setA">
  <legend>Set A Books</legend>
  <input value="300" type="checkbox" class="sum" data-toggle="checkbox"> English
  <input value="500" type="checkbox" class="sum" data-toggle="checkbox"> Science
  <input value="755" type="checkbox" class="sum" data-toggle="checkbox"> Christian Living
</fieldset>
<p></p>
<div class="card-charge-info">
  Price: <input type="text" id="payment-total" value="" disabled/></div> <br/> Price: <span id="payment-total">0</span>
</div>

标签： javascript

Answer 1

我对您的 sumUpdate 函数进行了一些修改，使其现在可以工作，您需要为输入控件和跨度提供不同的 id：

// Shorter querySelectorAll that returns a real array.
function select(selector, parent) {
  return Array.from((parent || document).querySelectorAll(selector));
}

var values = document.querySelectorAll('.sum');

function sumUpdate() {  
  var total = 0;
  var selectedItems = Array.prototype.filter.call(values,function(input) {
    return input.checked ? input : null;
  });

  $(selectedItems).each(function (index, element) {
        total = total + parseFloat($(element).val());
    });

  total = parseFloat(total).toFixed(2);
  $('#payment-total').val(total);
  $('#payment-total-span').text(total);
}

// Update the sums in function on input change.
values.forEach(function(input) {
  input.addEventListener("change", sumUpdate);
});

select(".checkAll").forEach(function(checkAll) {
  var targetFieldSet = document.getElementById(checkAll.getAttribute("data-target-set"));
  var targetInputs = select(".sum", targetFieldSet);

  // Update checkAll in function of the inputs on input change.
  targetInputs.forEach(function(input) {
    input.addEventListener("change", function() {
      checkAll.checked = input.checked && targetInputs.every(function(sibling) {
        return sibling.checked;
      });
    });
  });

  // Update the inputs on checkall change, then udpate the sums.
  checkAll.addEventListener("change", function() {
    targetInputs.forEach(function(input) {
      input.checked = checkAll.checked;
    });
    sumUpdate();
  });
});

function checkInput(text) {
  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><label><input type="checkbox" class="checkAll" data-target-set="setA"/> Check all Set A</label></p>
<fieldset id="setA">
  <legend>Set A Books</legend>
  <input value="300" type="checkbox" class="sum" data-toggle="checkbox"> English
  <input value="500" type="checkbox" class="sum" data-toggle="checkbox"> Science
  <input value="755" type="checkbox" class="sum" data-toggle="checkbox"> Christian Living
</fieldset>
<p></p>
<div class="card-charge-info">
  Price: <input type="text" id="payment-total" value="" disabled/> <br/> Price: <span id="payment-total-span">0</span>
</div>