[Resolved] Interactive single cpt template

[Author]

Posts

[jillT]

Site on local, not available online.

Is it possible to have a list with a checkbox that the visitor can click to put in a tick and it changes the fontstyle of that line to strike? Like the Ingredients list on this plugin (scroll down the page): hidden link

If so, how would I go about it please?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To make a list of checkboxes items that show text label as strikethrough when checked, you can structure the HTML list in this format:

<ul class="ingredient-list">
    <li>
        <input type="checkbox" name="ingredient 1" value="1" id="ingredient1">
        <label for="ingredient1">ingredient item number 1</label>
    </li>
    <li>
        <input type="checkbox" name="ingredient 2" value="2" id="ingredient2">
        <label for="ingredient2">ingredient item number 2</label>
    </li>
    <li>
        <input type="checkbox" name="ingredient 3" value="3" id="ingredient3">
        <label for="ingredient3">ingredient item number 3</label>
    </li>
    <li>
        <input type="checkbox" name="ingredient 4" value="4" id="ingredient4">
        <label for="ingredient4">ingredient item number 4</label>
    </li>
</ul>

And to style the label for the checked checkbox as strikethrough text, you can include the CSS code:

ul.ingredient-list li {
list-style: none;
}

ul.ingredient-list li input[type=checkbox]:checked+label {
text-decoration: line-through;
}

Demo: hidden link

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[jillT]

thank you. I can understand the html, but I'm not sure how to get that dynamically.

I should have explained a bit more, sorry

It is a custom post type, with a single line custom field type that allows multiple instances.
What block should I use and how would I display each instance?

[Waqar]

Thank you for sharing these details.

For dynamically generating this HTML through a repeating custom field, you can use the "wpv-for-each" shortcode:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-for-each

For example, suppose the field's slug is "ingredient-items":

<ul class="ingredient-list">
[wpv-for-each field="wpcf-ingredient-items"]
<li>
<label><input type="checkbox" name="" value="1"> <span> [types field="ingredient-items"][/types] </span></label>
</li>
[/wpv-for-each]
</ul>

The updated CSS code will be:

ul.ingredient-list li {
list-style: none;
}
 
ul.ingredient-list li input[type=checkbox]:checked+span {
text-decoration: line-through;
}

[jillT]

Thank you, that worked beautifully!