jqueryを使用してhtml要素に数値を加算または減算する方法

Question

スパンタグ内の数値から加減算しようとしています。これはチェックボックスに依存します。ここで私がしようとしているjQueryのです：私は、チェックボックスをオンにした場合

//If checked 
var $newprice = $("#totalprice").val() + 299;    
$("#totalprice").text($newprice); 

//If NOT checked 
var $newprice = $("#totalprice").val() - 299;    
$("#totalprice").text($newprice); 

、それは299が追加されますが、未確認の変更-299の数。スパンのために

Answer 1

あなたがいないval()コンテンツを取得するためにtext()メソッドを使用する必要があります。どちらの場合もval()は空の文字列を返します。最初のケースでは文字列の連結が行われます。後者の場合、それはあなたが、インデックス、以前の値を保持するコールバックでtext()を使用し、古い値を解析し、価値と収益を加算または減算することができます0

として-231を結果"" - 231、空の文字列の行為になりますそれは更新のためです。

//If checked 
var $newprice = $("#totalprice").text(function(i,v){ 
    return parseInt(v,10) + 299;    
}); 
//If NOT checked 
var $newprice = $("#totalprice").text(function(i,v){ 
    return parseInt(v,10) - 299;    
}); 

Answer 2

あなたは、チェックボックスの変更イベントでこれを行う必要があります：

+をリードする

$(':checkbox').change(function() { 
 
    if (this.checked) { 
 
    //If checked 
 
    var $newprice = +$("#totalprice").text() + 299; 
 
    $("#totalprice").text($newprice); 
 
    } else { 
 
    //If NOT checked 
 
    var $newprice = +$("#totalprice").text() - 299; 
 
    $("#totalprice").text($newprice); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <input type='checkbox'> 
 
    <span id='totalprice'>0</span> 
 
</p>

+$("#totalprice").text()は番号にテキストを向けるだろう。