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

Answer 1

通过变量名检查时获取错误值的原因是因为您在click事件之前设置了$myRadio。 $myRadio设置为文档就绪（在单击事件之前），它获取已检查的radio选项的值，此时此选项始终为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

Answer 2

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

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

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

从mdl单选按钮获取价值

2 个答案: