使用 jquery 从 Polymer 单选组中获取所选按钮的值

Question

I want to get the value from a polymer 1.0 radio group and save it to a database:

HTML:

<paper-radio-group selected="small">
  <paper-radio-button name="small">Small</paper-radio-button>
  <paper-radio-button name="medium">Medium</paper-radio-button>
  <paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>

Script:

var size = $('input[selected]:checked').val();

Is there a simple way with jQuery? Do I need to add an id on paper-radio-group?

Answer 1

You do not really need a id you can use Polymers databinding

<paper-radio-group selected="{{radioSelected}}">
  <paper-radio-button name="small">Small</paper-radio-button>
  <paper-radio-button name="medium">Medium</paper-radio-button>
  <paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>

Then in a custom element the value would be this.radioSelected or if you are using a autobinding template "dom-bind" the value would be app.radioSelected if app referred to the dom-bind tempate

without using databinding you would need a id.

<paper-radio-group id="radio">
  <paper-radio-button name="small">Small</paper-radio-button>
  <paper-radio-button name="medium">Medium</paper-radio-button>
  <paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>

I don't Jquery so I am using plain JS here

document.querySelector('#radio').selected