Question

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

count_checked计算已检查的数量和数量count_selected总共选择了值。

如何正确合计$("#count_total")？

＆＃13;

$(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);

});

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

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

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

选择器不正确：

$('input[name="checks[]"]');
//----------------------^--------missed a closing ']'

Answer 3

您需要做的就是修改总计逻辑，使其在change和input元素的select事件下运行。试试这个：

$(document).ready(function() {
  $('input[name="checks[]"]').change(updateTotal);
  $('#form').on('change', '.price', updateTotal);

  function updateTotal() {
    var count_checked = $('input[name="checks[]"]:checked').length;
    $('#count_checked').val(count_checked);

    var count_selected = 0;
    $('#form option:selected').each(function() {
      count_selected += parseInt($(this).val(), 10) || 0;
    });
    $('#count_selected').val(count_selected);

    $("#count_total").val(count_checked + count_selected);
  }
});

<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>

我如何全面检查和选择？

3 个答案: