javascript - 单选按钮输入上的“checked”属性不存在

Question

尝试创建单选按钮输入并设置checked属性时，该checked属性永远不会出现。有趣的是，:checked状态元素的 CSS 与 VoiceOver 当时为选定的单选按钮读出的效果一样。

这是一个显示此问题的 Ember twiddle：

https://ember-twiddle.com/1c3c6686c49a0c8338e24acc66b05a26

您会看到该checked属性从未出现在选中的单选按钮上，但 DOM 元素和 CSS 都显示为选中或选中状态。

有谁知道可能导致这种明显冲突的原因是什么？

标签： javascriptember.jsradio-buttonchecked

Answer 1

current问题是您甚至没有为单选按钮设置 value属性，也没有更改controller/application.js.

您应该更改templates/application.hbs. 首先，您应该在单选按钮中包含 value 属性，value={{option}}并在 onclick 属性上执行一个操作onclick={{action 'changeChecked'}}以指定更改。由于{{eq}}助手本身返回true or false，您也可以在没有{{if}}助手checked={{eq option current}} 的情况下编写选中的属性，因为最终输入标签应如下所示：

<input type="radio" name="colors" checked={{eq option current}} value={{option}} onclick={{action 'changeChecked'}}>

之后，controllers/application.js您必须添加操作changeChecked()

actions:{
  changeChecked(){
    set(this,'current',$('input:checked').val())
  }
},

而且，return 中的语句whichChecked应更改为：

return $('input:radio:checked').val();

现在您可以在 DOM 中动态获取选中的单选按钮。