[Resolved] Creating a frontend checkbox output for a list element

[Author]

Posts

[Lykke Scavenius]

I have a recipe post type, I would prefer to display the ingredients and the instructions with frontend checkboxes so that the visitor kan mark their progress. Example from actual frontend checklist, but I'm referring to the checkbox "effect" upon click. hidden link

Thanks and regards
Lykke

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand, you want to display checkboxes list with a progress bar and a progress bar should be updated based on the checkboxes checked, just like with the reference URL you shared.

I'm afraid that there is no such native feature available with Toolset and this requires custom programming which is beyond the scope of our support policy. If you need custom programming for your project such as implementing and integrating such JS library as per your requirement, please feel free to contact our certified partners:
=> https://toolset.com/contractors/

However, I'm not aware of the library you shared as reference but I suggest you should try to follow other simply CSS+jS tricks. Please check the following code examples that may help you to implement such a feature:
=> hidden link
=> hidden link
=> hidden link
=> hidden link

I strongly suggest following the above code example and try to implement it on your own.

[Lykke Scavenius]

No progress bar, just checkboxes for list items or repeatable form group items. Then I'll style them to cross out text when checked. Nothing else.

[Minesh]

Sorry - this is still not clear to me.

Do you mean that you want to list the posts belongs to specific post types with the checkbox field?

[Lykke Scavenius]

I am planning to use views to list ingredients and methods, I would like instead of a bullet point to have a checkbox, so that the visitor can mark their progress while cooking.

Thank you, regards
Lykke

[Minesh]

so, to have a checkbox with your view, you should simply add the checkbox field to your view's Loop Editor within the loop.

<input type="checkbox" name="checkbox-field" value="[wpv-post-id]">  

Where:
- as you can see, each checkbox will have the different value as we have assigned the post ID using the shortcode [wpv-post-id].

Please check the following reference links:
=> https://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html
=>hidden link
=> https://stackoverflow.com/questions/18537609/how-to-check-all-checkboxes-using-jquery/18537624#18537624

Please let me know if you need further help.