javascript - JS中 bool 运算影响变量？

Question

我正在检查页面上单选按钮的选中状态，以便在按下它们时继续:

<form>
  <input type="radio" name="tier0" />
  <input type="radio" name="tier1" />
  <input type="radio" name="tier2" />
  <input id="reset" type="button" value="Reset" />
</form>

每次按下 tier1 按钮并且 $tier 为 true 时，下面对 $result 的评估都会以某种方式将 $tier2 变为未定义，因此 $result 永远不会为 true，我无法继续。看看这个:http://jsfiddle.net/29ppxpgm/

var $tier0;
var $tier1;
var $tier2;
var $result;

function display() {
  $tier0 = $('[name=tier0]').prop('checked');
  $tier1 = $('[name=tier1]').prop('checked');
  $tier2 = $('[name=tier2]').prop('checked');

  // this boolean operation seems to affect the form elements
  $result = $tier0 && $tier1 && tier2;

  $('#result').html($tier0.toString() + ' & ' + $tier1.toString() + ' & ' + $tier2.toString() + ' => ' + $result.toString());
}

display();

$('input[type=radio]').click(function() {
  display();
});

$('#reset').click(function() {
  $('[type=radio]:checked').prop('checked', false);
  display();
});

怎么会这样？

Answer 1

在我看来，您有一个可修改的拼写错误，您定义了 $tier2，并将其引用为 tier2。

function display() {
  $tier0 = $('[name=tier0]').prop('checked');
  $tier1 = $('[name=tier1]').prop('checked');
  $tier2 = $('[name=tier2]').prop('checked');
  $result = $tier0 && $tier1 && *tier2*;  // it should be $tier2
  $('#result').html($tier0.toString() + ' & ' + $tier1.toString() + ' & ' + $tier2.toString() + ' => ' + $result.toString());
}

参见Demo .