Polymer 创建一组纸张复选框（使用熨斗选择器？）

我的目标是将一组

纸质复选框分组

对于
纸张比率按钮
，我正在执行以下操作：

<paper-radio-group selected="foo">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
</paper-radio-group>

但是这不起作用，没有选中带有
name=foo
的复选框
您必须编写自己的小元素。没那么难。。首先要做的是：

母公司

<my-el selected="foo">
  <paper-checkbox name="foo"></paper-checkbox>
  <paper-checkbox name="bar"></paper-checkbox>
  <paper-checkbox name="foobar"></paper-checkbox>
</my-el>



我的el


聚合物({
是‘我的el’，
特性：{
选定：{
类型：字符串，
观察者：“\u选择复选框”
}
},
_选择复选框（）{
var复选框=此。$.slotted.getDistributedNodes（）；
此选项。重置（复选框）；
对于（变量i=0；i=checkbox.length；i++）{
var obj=复选框[i]；
if（obj.getAttribute（“名称”）==值）{
obj.checked=true；
}
}
},
重置：功能（obj）{
for（变量i=0；i=obj.length；i++）{
obj[i]。选中=错误；
}
返回true；
}
});

我希望这会对你有所帮助。当然，您必须实现更多的逻辑才能使其正常工作。如果你有更多的问题，尽管问，我可以编辑我的答案

一点解释：

顺便说一下：我假设您使用的是聚合物版本>=1.7.0。对于较旧的版本，您必须使用
元素而不是
，并且不同的选择器我让它工作，我缺少
selected attribute=“checked”
：


福
酒吧

要允许多选，请使用
谢谢您的回答。我使用的是2.0预览版。在Polymer<1.0上，我使用的是核心选择器，非常简单：@Steren但仍然。。复选框用于多个选择，而不仅仅是一个选择。。如果您只想选择一个选项，那么您应该使用radio按钮进行多个选择，我使用：
@Steren Cool，很高兴知道这一点
<my-el selected="foo">
  <paper-checkbox name="foo"></paper-checkbox>
  <paper-checkbox name="bar"></paper-checkbox>
  <paper-checkbox name="foobar"></paper-checkbox>
</my-el>

<dom-module id="my-el">
  <template>
    <slot></slot>
  </template>
<script>
    Polymer({
        is: 'my-el',

        properties: {
            selected: {
                type: String,
                observer: "_selectCheckboxes"
            }
        },

        _selectCheckboxes() {
            var checkboxes = this.$.slotted.getDistributedNodes();
            this.reset(checkboxes);
            for (var i = 0; i = checkboxes.length; i++) {
                var obj = checkboxes[i];

                if(obj.getAttribute("name") == value) {
                    obj.checked = true;
                }
            }
        },

        reset: function(obj) {
            for (var i = 0; i = obj.length; i++) {
                obj[i].checked = false;
            }
            return true;
        }
    });
</script>    

</dom-module>

<iron-selector attr-for-selected="name" selected="foo" selected-attribute="checked">
  <paper-checkbox name="foo">Foo</paper-checkbox>
  <paper-checkbox name="bar">Bar</paper-checkbox>
</iron-selector>