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 the 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
        } )
    ]
},

  • 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 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. – Alex Mangini May 21 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 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. – Alex Mangini May 22 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 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.