通過單選按鈕動態更改常數值

Question

我有兩個單選按鈕，例如

<input type="radio" name="pking"  value="pi" id="p1">
<input type="radio" name="pking"  value="pl" id="p2">
<h3 id="daam" class="text-center"></h3>

我想做的是，如果選擇id="p1"單選按鈕，則javascript變量的值應為35，在第二種情況下其值為40，並計算值。 這是js代碼

$("#p1").change(function () {
    "use strict";
    var pp = 35;
    $('#daam').text("    value is: " + (21 * pp));
});

$("#p2").change(function () {
    "use strict";
    var pp = 40;
    $('#daam').text("    value is: " + (21 * pp));
});

問題是當我選擇另一個單選按鈕時，標題標簽上打印的值不會得到更新。

 var pp; $("#p1").change(function() { "use strict"; pp = 35; $('#daam').text(" value is: " + (21 * pp)); }); $("#p2").change(function() { "use strict"; pp = 40; $('#daam').text(" value is: " + (21 * pp)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="pking" value="pi" id="p1"> <input type="radio" name="pking" value="pl" id="p2"> <h3 id="daam" class="text-center"></h3> 

Answer 1

您無需為每個單選按鈕使用change事件。 您可以像下面這樣簡單地進行操作。

 $(":radio[name=pking]").change(function() { var pp = this.id == 'p1' ? 35 : 40; $('#daam').text(" value is: " + (21 * pp)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="pking" value="pi" id="p1"> <input type="radio" name="pking" value="pl" id="p2"> <h3 id="daam" class="text-center"></h3>