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>

通过单选按钮动态更改常量值

1 个答案: