单选按钮输入的`checked`属性不存在

Question

When trying to create an radio button input and setting the checked attribute, the checked attribute never appears. Interestingly, the CSS for :checked state elements works as does VoiceOver read out for the selected radio button at the time.

Here's an Ember twiddle that displays this issue:

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

You'll see that the checked attribute never appears on the selected radio button, but both the DOM element and CSS display as checked or selected.

Does anyone know what might be causing this apparent conflict?

Answer 1

The problem is that you didn't even set value attribute to the radio buttons and also didn't change the current property in the controller/application.js .

You should change three things in the templates/application.hbs . First you should include value attribute to the radio buttons value={{option}} and an action on the onclick attribute onclick={{action 'changeChecked'}} to specify the change. Since the {{eq}} helper itself returns true or false you can also write the checked attribute without the {{if}} helper as checked={{eq option current}} The final input tag should look like :

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

After that, in the controllers/application.js you have to add the action changeChecked()

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

And also, the return statement in the whichChecked should be changed to :

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

Now you can dynamically get the selected radio button in the DOM.

Answer 2

You should be using:

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

instead of:

$('input[checked]').val()