0

I am trying to create a similar Group Checkbox Control like the WordPress categories listing but have not been able to save my values. I am not convinced I am taking the best direction, but seem to be close to the answer.

enter image description here

I'd like these checkbox values to save to a single attribute as an array, but I am fine with saving the selections as a string (value1,value3,value4,etc).

Below is an example of the edit() method I have created and I've taken notes from a similar question here, but am not able to get my selections to save:

attributes: {
    myCheckbox: {
        type: 'array',
        default: []
    }
},
edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : myCheckbox[fields.value] });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

7
  • 1
    Instead of using a checkbox "value" you need to use the "checked" attribute. Also, you are creating two checkboxes that both update a single attribute called myCheckbox. You need to have a separate attribute for each checkbox. If the user can only choose one of the two, use radio buttons instead.
    – WebElaine
    May 21, 2019 at 20:11
  • Thank you @WebElaine. I do have checked in the Checkbox control declaration, or are you talking about actually checking myCheckbox.checked ? true : false and if so, in the setAttributes function? I ask because I am still a little unclear, though your comment has given me a better understanding. By the way, I am not trying to create a radio, I only limited the choices to keep the example code shorter. May 21, 2019 at 22:10
  • Yes, I meant checking true : false and using that in props.setAttributes. And, you need to have a separate attribute for each checkbox.
    – WebElaine
    May 22, 2019 at 13:40
  • @WebElaine when you say separate attributes are you referring to something like myCheckbox[fields.value]? I am not sure how to reference myCheckbox as an array without getting errors. May 22, 2019 at 18:00
  • Yes. You can either create a mycheckbox1 attribute and a mycheckbox2 attribute, or else if you are going to use a single mycheckbox attribute that is an array of values, you'll have to clone that array and update only the value that changed. Much simpler to use separate attributes IMHO.
    – WebElaine
    May 22, 2019 at 18:40

1 Answer 1

-1

Use this code

$.each(data, function (c, fields) {
  checkboxes.push(
    el( CheckboxControl, {
      key: fields.value,
      label: fields.label,
      name: 'myCheckbox[]',
      checked: props.attributes.myCheckbox.indexOf(fields.value) > -1,
      onChange: function( val ) {
        let data = props.attributes.myCheckbox;
        if (val) {
          if (data.indexOf(fields.value) === -1) {
            data.push(fields.value);
          }
        } else {
          data = props.attributes.myCheckbox.filter((v) => v !== fields.value);
        }
        props.setAttributes({ myCheckbox: data });
      }
    })
  )
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.