聚合物纸 - 无线电 - 组 - 如何有多个单选按钮具有相同的名称 [英] Polymer Paper-Radio-Group - how to have multiple radio buttons with the same name

问题描述

我使用聚合物项目中的纸元素来构建表单，并且使用 paper-radio-group 标记及其子元素遇到问题纸单选按钮。使用普通的单选按钮列表，我会执行以下操作：

 < input type =radioname =myFieldName value =MyFirstOption/> 
< input type =radioname =myFieldNamevalue =MySecondOption/> 
< input type =radioname =myFieldNamevalue =MyThirdOption/> 
  

请注意，名称属性相同，将单选按钮分组并为 myFieldName 字段生成单个值。然而，以同样的方式使用 paper-radio-group 元素不起作用：

 < paper-radio-group label =My Field> 
< paper-radio-button name =myFieldNamelabel =First>< / paper-radio-button> 
 < paper-radio-button name =myFieldNamelabel =Third>< / paper-radio-button> 
< / paper-radio-group> 
  

这会产生三个单选按钮，但选择一个不会取消其他选择。如果我给每一个唯一的名称，然后它从UI的角度来看，但不同于标准的单选按钮行为。

除此之外，我在哪里指定每个单选按钮的值？有一个标签属性，但没有任何价值。我将不得不将隐藏字段连接到纸张单选按钮的更改事件，或者 paper-radio-group 上的核心选择事件？这两个问题似乎都不是特别优雅的解决方案。 解决方案

这个问题相当古老，可能当时并不存在，至少现在我们可以在 paper-radio-buttons 中拥有属于<$ $的相同<名称属性c $ c> paper-radio-group 如果我们在 paper-radio中选择不同的 attr-for-selected -group 例如值

 < ; paper-radio-group attr-for-selected =value> 
 < paper-radio-button value =twoname =same_name>两个标签< / paper-radio-button> 
< / paper-radio-group> 
  

让我的答案留在这里，因为这是我在Google上搜索时得到的结果，可能对其他人有价值。

I'm using Paper Elements from the Polymer Project to build a form, and have run into a problem using the paper-radio-group tag and its children, paper-radio-button. With a normal radio button list, I would do the following:

<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />

Note that the name attributes are the same, grouping the radio buttons and producing a single value for the myFieldName field. However using the paper-radio-group element in the same way does not work:

<paper-radio-group label="My Field">
  <paper-radio-button name="myFieldName" label="First"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Second"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Third"></paper-radio-button>
</paper-radio-group>

This produces three radio buttons, but selecting one doesn't deselect the others. If I give each a unique name then it works from a UI perspective, but is different than the standard radio button behaviour.

In addition to this, where do I specify the value for each radio button? There is a label property, but nothing for value. Am I going to have to wire up a hidden field to the change event of the paper-radio-button, or the core-select event on the paper-radio-group? Neither seems like a particularly elegant solution.

解决方案

This question is quite old and probably the property did not exist at the time, but at least now a days we can have the same name attribute in paper-radio-buttons that belong to a paper-radio-group if we select a different attr-for-selected in the paper-radio-group for example value

<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>

Leaving my answer here as this was the hit i get while googling and might be of value to others.

这篇关于聚合物纸 - 无线电 - 组 - 如何有多个单选按钮具有相同的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！