从mdl单选按钮获取值

Getting value from mdl radio button

本文关键字：获取 单选按钮 mdl      更新时间：2023-09-26

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

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移动到点击处理程序中应该可以工作。为什么?因为现在只要点击函数被调用，它就会获得单选项的值(选中)，而这正是你所需要的。

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

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

var  $myRadio = $('input[type=radio][name=options]');
$('#button').click(() => {
  console.log($myRadio.filter(':checked').val());
}
相关文章：