我如何全面检查和选择？ [英] How do I total checked and selected?

问题描述

我有复选框并选择选项，需要将它们合计。

I have checkboxes and select option and need to total them.

count_checked 计算检查数量和放大器数量; count_selected 所选值的总和。

count_checked to count how many checked & count_selected total of value selected.

如何正确计算 $（＃ count_total）？

$(document).ready(function() {
  var $checkboxes = $('input[name="checks[]"');
  $checkboxes.change(function() {
    var count_checked = $checkboxes.filter(':checked').length;
    $('#count_checked').val(count_checked);
  });


  $('#form').on('change', '.price', function() {
    var count_selected = 0;
    $('#form option:selected').each(function() {
      count_selected += parseInt($(this).val()) || 0;
      $('#count_selected').val(count_selected);
    });
  });

  var a = $('#count_checked').val();
  var b = $('#count_selected').val();

  $("#count_total").val(a + b);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input class="price" name="checks[]" type="checkbox" value="1">1
  <input class="price" name="checks[]" type="checkbox" value="2">2
  <input class="price" name="checks[]" type="checkbox" value="3">3

  <select name="form_1" id="form_1" class="price">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select name="form_21" id="form_2" class="price">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr>
  <input type="text" id="count_checked" name="count_checked" value="0">
  <input type="text" id="count_selected" name="count_selected" value="0">
  <input type="text" id="count_total" name="count_total">
</form>

推荐答案

您应该将更改事件绑定到 count_checked 和 count_selected 元素。

You should bind change event to count_checked and count_selected element.

  $('#count_checked, #count_selected').change(function() {
    var a = +$('#count_checked').val();
    var b = +$('#count_selected').val();

    $("#count_total").val(a + b);
  });

然后在更新值时触发更改事件

then trigger the change event when updating value

$(document).ready(function() {
  var $checkboxes = $('input[name="checks[]"]');
  $checkboxes.change(function() {
    var count_checked = $checkboxes.filter(':checked').length;
    $('#count_checked').val(count_checked).trigger('change');
  });


  $('#form').on('change', '.price', function() {
    var count_selected = 0;
    $('#form option:selected').each(function() {
      count_selected += parseInt($(this).val()) || 0;
    });
    $('#count_selected').val(count_selected).trigger('change');
  });

  $('#count_checked, #count_selected').change(function() {
    var a = +$('#count_checked').val();
    var b = +$('#count_selected').val();

    $("#count_total").val(a + b);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input class="price" name="checks[]" type="checkbox" value="1">1
  <input class="price" name="checks[]" type="checkbox" value="2">2
  <input class="price" name="checks[]" type="checkbox" value="3">3

  <select name="form_1" id="form_1" class="price">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select name="form_21" id="form_2" class="price">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr>
  <input type="text" id="count_checked" name="count_checked" value="0">
  <input type="text" id="count_selected" name="count_selected" value="0">
  <input type="text" id="count_total" name="count_total">
</form>

这篇关于我如何全面检查和选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！