Question

我正在使用Polymer Project中的Paper Elements来构建表单，并使用paper-radio-group标记及其子项paper-radio-button遇到问题。使用普通的单选按钮列表，我会执行以下操作：

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

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

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

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

除此之外，我在哪里指定每个单选按钮的值？有一个标签属性，但没有任何价值。我是否必须将隐藏字段连接到change的{{1}}事件或paper-radio-button上的core-select事件？这似乎都不是一个特别优雅的解决方案。

Answer 1

这个问题相当陈旧，可能当时属性不存在，但至少现在我们可以在name中拥有属于paper-radio-buttons的相同paper-radio-group属性如果我们在attr-for-selected中选择不同的paper-radio-group，例如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>

在这里留下我的答案，因为这是我在谷歌搜索时得到的打击，可能对其他人有价值。

Answer 2

如果您想使用纸质元素作为表单输入字段的替代品而不编写任何JavaScript，那么我认为您不能，因为它们只不过是 divs 的样式。

paper-radio-button 的 name 属性是其值。当前选择的按钮使用 paper-radio-group 的 selected 属性指定，并且可以绑定到element属性。然后，您可以使用属性观察程序或在需要时访问此值。如果您给 paper-radio-group 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>

Polymer Paper-Radio-Group - 如何使用相同名称的多个单选按钮

2 个答案: