Forms 聚合物纸单选组-如何具有多个同名单选按钮_Forms_Polymer_Paper Elements

Forms 聚合物纸单选组-如何具有多个同名单选按钮

forms polymer

Forms 聚合物纸单选组-如何具有多个同名单选按钮,forms,polymer,paper-elements,Forms,Polymer,Paper Elements,我正在使用Polymer项目中的纸张元素构建表单，但在使用纸张单选组及其子项纸张单选按钮时遇到了问题。使用普通单选按钮列表，我将执行以下操作： <input type="radio" name="myFieldName" value="MyFirstOption" /> <input type="radio" name="myFieldName" value="MySecondOption" /> <input type="radio" name="myFieldN

我正在使用Polymer项目中的纸张元素构建表单，但在使用

纸张单选组及其子项纸张单选按钮时遇到了问题。使用普通单选按钮列表，我将执行以下操作：
<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />

这将生成三个单选按钮，但选择一个按钮不会取消选择其他按钮。如果我给每个按钮一个唯一的名称，那么它可以从UI的角度工作，但与标准的单选按钮行为不同
除此之外，我在哪里指定每个单选按钮的值？有一个label属性，但没有值。我是否必须将隐藏字段连接到纸张单选按钮的更改事件
，或纸张单选组的核心选择事件
？这两种方法似乎都不是特别优雅的解决方案。
如果您想在不编写任何JavaScript的情况下使用paper元素作为表单输入字段的替代品，那么我认为您不能，因为它们只不过是样式化的div
纸张单选按钮的“名称”属性是其值。当前选定的按钮由纸张单选组的“选定”属性指定，并且可以绑定到元素属性。然后，您可以使用属性观察程序，也可以在需要时访问该值。如果您给纸质收音机组一个id，比如radio，您也可以使用this.$.radio.selected
直接获取所选项目
下面是一个小例子：
<!DOCTYPE html>
<html>

<head>
  <script src='http://www.polymer-project.org/components/platform/platform.js'></script>
  <link rel='import' href='http://www.polymer-project.org/components/paper-radio-group/paper-radio-group.html'>
</head>

<body unresolved>

  <polymer-element name="my-app">
    <template>
      <paper-radio-group selected="{{selection}}">
        <paper-radio-button name="small" label="Small"></paper-radio-button>
        <paper-radio-button name="medium" label="Medium"></paper-radio-button>
        <paper-radio-button name="large" label="Large"></paper-radio-button>
      </paper-radio-group>
    </template>
    <script>
      Polymer('my-app', {
        created: function () { 
          this.selection = "medium" 
        },
        selectionChanged: function () { 
          console.log(this.selection); 
        }
      });
    </script>
  </polymer-element>

  <my-app></my-app>

</body>
</html>


聚合物（“my-app”{
已创建：函数（）{
this.selection=“中”
},
selectionChanged:函数（）{
console.log（此选项）；
}
});
这个问题很老了，可能当时不存在财产，但至少现在，如果我们在纸质单选按钮组
中为所选
选择不同的属性，例如值
，我们可以在属于纸质单选按钮组
的纸质单选按钮中拥有相同的名称
属性
<paper-radio-group attr-for-selected="value">
  <paper-radio-button value="one" name="same_name">Label for one</paper-radio-button>
  <paper-radio-button value="two" name="same_name">Label for two</paper-radio-button>
</paper-radio-group>


一个人的标签
两个人的标签

在这里留下我的答案，因为这是我在谷歌搜索时受到的打击，可能对其他人有价值
<paper-radio-group attr-for-selected="value">
  <paper-radio-button value="one" name="same_name">Label for one</paper-radio-button>
  <paper-radio-button value="two" name="same_name">Label for two</paper-radio-button>
</paper-radio-group>