Question

我的目标是将一组paper-checkbox分组。

对于paper-ratio-button，我正在做：

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

对于paper-checkbox，我本来希望使用iron-selector：

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

但这不起作用，未选中name=foo复选框

Answer 1

我开始工作，我失踪了$(function () { $('#myproject').multiselect({ selectableHeader: "<div class='custom-header'>Selectable items</div>", selectionHeader: "<div class='custom-header'>Selection items</div>", selectableFooter: "<div class='custom-header'>Selectable footer</div>", selectionFooter: "<div class='custom-header'>Selection footer</div>", nonSelectedText: '- - -Select Project- - -', includeSelectAllOption: true, maxHeight: 400, dropUp: true, buttonWidth: 230, });：

selected-attribute="checked"

要允许多项选择，请使用<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>

Answer 2

你必须编写自己的小元素。它并不那么难......只是开始的事情：

父

<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

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

我希望这会对你有所帮助。当然，你必须实现更多的逻辑才能使它工作。如果您对此有更多疑问，请询问，我可以编辑我的答案。

一点解释：https://www.polymer-project.org/2.0/docs/upgrade

顺便说一句：我假设您使用的是Polymer版本＆gt; = 1.7.0。对于旧版本，您必须使用<content>元素而不是<slot>和不同的选择器

创建一组纸复选框（使用铁选择器？）

2 个答案: