Skip Navigation

[Resolved] Display Checkboxes as a list – similar to CRED Forms

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Tagged: 

This topic contains 7 replies, has 2 voices.

Last updated by stefanB-2 6 years, 1 month ago.

Assigned support staff: otto.f.

Author
Posts
#316940

What is the trick to display Checkboxes as a list similar to the way the Checkboxes are displayed within a CRED form. Now are all checklist items displayed as a sentence with a seperator in between. I'm looking for a solution to present the checkboxes under each other, including the state of checked - unchecked.

#316977

otto.f
Supporter

Hello,

Thank you for contacting Toolset support!

Do you mean the style of the checkboxes in the edit CPT page?

I tried in my test install and they are displayed as a list.

Anyway, you can customize the appearance of fields using the CSS editor, which is inside the group setting page. Please take a look at this documentation: https://toolset.com/documentation/user-guides/css-styling-for-fields/

If this is not what you are asking, can you please elaborate a little more so I can better understand? Sometimes screenshots illustrating what you mean may go a long way to clarify what words fail to transmit so if you like make use of “upload an image” below the comment area.

Kind Regards

#316992
Checkbox-view.png
Checkbox-cred.png

Find attached the examples from the CRED Form and the VIEW

I'm using the checkboxes as a checklist - where it is important to see what has been checked and what is not checked.

I would like to present the CheckBoxes in my View/Content Template as a list including the checkboxes - see attachment Checkbox-cred.png -

#317059

otto.f
Supporter
checkboxes.png

Hello,

You may try the following:

In your view, insert the checkboxes shortcode using the "Fields and Views" button. When options prompted choose "Enter values for 'selected' and 'not selected' states"

You will get something like this:

[types field="test-checkboxes" option="0" state="checked"]Option 1 selected[/types][types field="test-checkboxes" option="0" state="unchecked"]Option 1 not selected[/types][types field="test-checkboxes" option="1" state="checked"]Option 2 selected[/types][types field="test-checkboxes" option="1" state="unchecked"]Option 2 not selected[/types][types field="test-checkboxes" option="2" state="checked"]Option 3 selected[/types][types field="test-checkboxes" option="2" state="unchecked"]Option 3 not selected[/types][types field="test-checkboxes" option="3" state="checked"]Option 4 selected[/types][types field="test-checkboxes" option="3" state="unchecked"]Option 4 not selected[/types]

Then you should wrap the all the shortcodes within

    tags.

    And each option pair (selected / not selected) within

  • Inside each shortcode you can write what you need including html, so you can add the checkbox.

    You'll get somothing like this:

    <ul>
      <li>[types field="test-checkboxes" option="0" state="checked"]Option 1 selected: <input checked type="checkbox">[/types][types field="test-checkboxes" option="0" state="unchecked"]Option 1 not selected: <input type="checkbox">[/types]</li> 
      <li>[types field="test-checkboxes" option="1" state="checked"]Option 2 selected: <input checked type="checkbox">[/types][types field="test-checkboxes" option="1" state="unchecked"]Option 2 not selected: <input type="checkbox">[/types]</li>
      <li>[types field="test-checkboxes" option="2" state="checked"]Option 3 selected: <input checked type="checkbox">[/types][types field="test-checkboxes" option="2" state="unchecked"]Option 3 not selected: <input type="checkbox">[/types]</li>
      <li>[types field="test-checkboxes" option="3" state="checked"]Option 4 selected: <input checked type="checkbox">[/types][types field="test-checkboxes" option="3" state="unchecked"]Option 4 not selected: <input type="checkbox">[/types]</li>
    </ul>
    

    Check the result on the attached screenshot.

    Please let me know if this pointed you in the right direction.

    Kind Regards

    #317159

    Wow - that means quite some coding as I have quite a lot of checklists that I have to process.

    I assume also that when I would like to have the checkbox in front, I just to have the change the coding from

    Option 1 selected: <input checked type="checkbox">
    

    into

    <input checked type="checkbox": Option 1 selected >
    

    Would be a nice feature request then to handle checkboxes in a similar way on Views 🙂

    #317160

    There is no option to get the stored values automatic in place here, as I do have nice values stored for both selected and non-selected. Otherwise I have to maintain these values within my Customer Fields and all my Views - and that is a bit undoable....

    #317205

    otto.f
    Supporter

    https://toolset.com/forums/topic/display-checkboxes-as-a-list-similar-to-cred-forms/

    Hello,

    Yes, you can get the stored value.

    You need to add this other shortcode: [types field="test-checkboxes" option="0"][/types]

    So, each li element should be:

      <li>[types field="test-checkboxes" option="0" state="checked"][types field="test-checkboxes" option="0"][/types]:<input checked type="checkbox">[/types][types field="test-checkboxes" option="0" state="unchecked"][types field="test-checkboxes" option="0"][/types]: <input type="checkbox">[/types]</li> 
    

    Are we getting closer?

    Let me know if you need more help please.

    Kind Regards

    #321269

    There was a little mistake in your last suggested code ...

  • [types field="test-checkboxes" option="0" state="checked"][types field="test-checkboxes" option="0"][/types]:<input checked type="checkbox">[/types][types field="test-checkboxes" option="0" state="unchecked"][types field="test-checkboxes" option="0"][/types]: <input type="checkbox">[/types]
  • For the uncheck part, I have changed "<input type="checkbox">" into <input unchecked type="checkbox" and now it is working as expected. Before, I was getting all options with a checkmark.

    Still a lot of coding - and when you change the Options - you need to go through your views and content templates. Sound strange that the type of presenting in a view can not be the same as within a form ...
    Maybe a topic for the new feature list ...

    Thanks for the great support