2

My goal is to group a set of paper-checkbox.

For paper-ratio-button, I am doing:

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

For paper-checkbox, I would have expected to use 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>

But this does not work, the checkbox with name=foo is not selected

Steren
  • 7,311
  • 3
  • 31
  • 51

2 Answers2

4

I got it working, I was missing 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>

To allow multiple selection, use <iron-selector attr-for-selected="name" multi selected-values='["foo","bar"]' selected-attribute="checked">

Steren
  • 7,311
  • 3
  • 31
  • 51
-1

You have to write your own little element. It's not that hard.. just something to start with:

parent

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

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>

I hope that this will help you. Off course that you have to implement a little bit more logic to make it work. If you have more questions about it just ask, and i can edit my answer.

A little explanation: https://www.polymer-project.org/2.0/docs/upgrade

By the way: I assume you are using Polymer version >= 1.7.0. For older versions you have to use <content> element instead of <slot> and different selector

Kuba Šimonovský
  • 2,013
  • 2
  • 17
  • 35