復選框在頁面加載時選中並顯示輸出

Question

下面是我的工作代碼，但唯一的問題是，我希望默認情況下選中此復選框，並在頁面加載時顯示jQuery輸出，但僅在我重新選中該復選框時才顯示輸出。

http://jsfiddle.net/pratyush141/2mq5sr1h/

$(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.8.3/jquery.min.js"></script>
<div class="invoice">
<input type="checkbox" checked='checked' value="1" />
<span class="inv-total">$100</span>
</div>

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

Answer 1

很簡單，只需從復選框中刪除checked = checked，然后使用jquery調用單擊復選框即可

<div class="invoice">
   <input type="checkbox" value="1" />
    <span class="inv-total">$100</span>
</div>


$(function () {
$defaultValue = $('.total').val();
$("input[type=checkbox]").change(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);
    }
});

//Call the click on checkbox
$("input[type=checkbox]").click();
})

工作提琴： http : //jsfiddle.net/2mq5sr1h/5/

Answer 2

設置點擊事件的輸入值。 您需要在$(document).ready() 。 嘗試將腳本更改為此：

$(document).ready(function (){

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

 });

function setValue()
{
   $defaultValue = $('.total').val();
   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);
    }
}