javascript - 从MDL单选按钮获取值(value)

在下面的代码中，当通过其变量名称进行检查时，为什么无线电未报告正确的值？

var $myRadio = $('input[type=radio][name=options]:checked');

$('#button').click(() => {
  // this works
  console.log($('input[type=radio][name=options]:checked').val());
  // this doesn't :(
  console.log($myRadio.val());
});

https://jsfiddle.net/charsi/p4beztwx/13/

我正在使用mdl单选按钮，所以可能是造成它的原因。我也尝试使用$myRadio[0].MaterialRadio.value获取值，但这也不起作用。

编辑：这是一个措辞不佳的问题，与mdl确实没有任何关系。我真正想要的是能够在其他地方为单选按钮设置DOM变量，而不必再次通过名称选择它来检查值的能力。

最佳答案

通过变量名进行检查时获得错误值的原因是因为您在单击事件之前设置了$myRadio。 $myRadio在文档就绪状态下设置（单击事件之前），它获得选中的单选选项的值，该值此刻始终为1。

在点击处理程序内移动$myRadio应该可以。为什么？因为现在，它在调用click函数后立即获得了收音机的值（已选中），而这实际上正是您所需要的。

$('#button').click(() => {
  var $myRadio = $('[id^="option"]:checked');
  // neither of these work
  alert($('input[type=radio][name=options]:checked').val());
  alert($myRadio.val());

});

小提琴here