从 mdl 单选按钮获取价值

Question

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

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

Answer 1

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

在点击处理程序中移动 $myRadio 应该可以。为什么？因为现在一旦调用点击函数，它就会获得无线电的值（选中），这实际上是您需要的。

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

});

fiddle here

Answer 2

其他运行遇到相同问题的人。在检查其值时不想调用单选按钮名称，您可以使用 filter -

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

$('#button').click(() => {
  console.log($myRadio.filter(':checked').val());
}

从 mdl 单选按钮获取价值

Getting value from mdl radio button

javascript

jquery

material-design-lite