javascript - 从 mdl 单选按钮获取值

Question

在下面的代码中，为什么 radio 在通过变量名称检查时没有报告正确的值？

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 变量，而不必再次按名称选择它来检查值。

Answer 1

通过变量名称检查时获取不正确值的原因是您在点击事件之前设置了 $myRadio。 $myRadio 在文档就绪时设置(在单击事件之前)，它获取选中的单选选项的值，此时该值始终为 1。

在点击处理程序中移动 $myRadio 应该可以。为什么？因为现在一旦调用单击函数，它就会获取 radio 的值(选中)，这实际上正是您所需要的。

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

});

fiddle here