在页面加载时默认选中复选框

时间:2015-03-10 18:57:35

标签: jquery

下面是我的工作代码,但唯一的问题是,我希望默认情况下选中复选框并在页面加载时显示jquery输出,但是当我重新选中复选框时它只显示输出。

$(function() {
  $defaultValue = $('#total').val();
  $("input[type=checkbox]").click(function(event) {
    var total = 0;
    $("input:checked").each(function() {
      total += parseInt($(this).parent().find('.inv-total').text().substring(1));
    });

    if (total == 0) {
      $('#total').val($defaultValue);
    } else {
      $('#total').val('$' + total);
    }
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="invoice">
  <input type="checkbox" checked='checked' value="1" />
  <span class="inv-total">$100</span>
</div>

<input type="text" id="total" value="$90" />

2 个答案:

答案 0 :(得分:1)

试试这个:

$(function() {
    var total = 0;
    $defaultValue = $('#total').val();
    checkCheckboxes();

    $("input[type=checkbox]").click(function(event) {
      checkCheckboxes();
    })

    function checkCheckboxes() {
      total = 0;
      $("input:checked").each(function() {
        total += parseInt($(this).parent().find('.inv-total').text().substring(1));
      });

      if (total == 0) {
        $('#total').val($defaultValue);
      } else {
        $('#total').val('$' + total);
      }
    });
}

答案 1 :(得分:0)

您可以使用.trigger('click')两次取消选中并选中复选框:

&#13;
&#13;
$(function() {
  $defaultValue = $('#total').val();
  $("input[type=checkbox]").click(function(event) {
    var total = 0;
    $("input:checked").each(function() {
      total += parseInt($(this).parent().find('.inv-total').text().substring(1));
    });

    if (total == 0) {
      $('#total').val($defaultValue);
    } else {
      $('#total').val('$' + total);
    }
  }).trigger('click').trigger('click');

})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="invoice">
  <input type="checkbox" checked='checked' value="1" />
  <span class="inv-total">$100</span>
</div>

<input type="text" id="total" value="$90" />
&#13;
&#13;
&#13;

相关问题