[trendoman]

So, this is for the front-end? This is a working sample:

Code: Select all

        <label for="colours1">
            <input type="checkbox" name="colours[]" id="colours1" value="Gold"> Gold            
        </label>
        <label for="colours2">
            <input type="checkbox" name="colours[]" id="colours2" value="White"> White            
        </label>
        <cms:hide>
            <cms:input type="checkbox" opt_values=opt_values name="colours" id="colours" />
        </cms:hide>

[trendoman]

Also you may try this automated version:

Code: Select all

        <cms:each opt_values as='color' sep=''>
            <cms:if color ne '' >
                <label for="colours<cms:show k_count />">
                    <input type="checkbox" name="colours[]" id="colours<cms:show k_count />" value="<cms:show color />"> <cms:show color />            
                </label>            
            </cms:if>
        </cms:each>

        <cms:hide>
            <cms:input type="checkbox" opt_values=opt_values name="colours" id="colours" />
        </cms:hide>

Hi Trendoman,

Yeah, this is ultimately for the front end. I've attached a screenshot below of what I managed to achieve using the css and classes from here: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp



I tried your automated version replacing mine and the filter works now! Yay! Although the only problem is the ticks don't remain the same as it's just a span. I reckon I can fix this with a js script or something.

Thanks again! Your help has been much appreciated

[trendoman]

Hi, in your screenshot input's name does not contain "[]". It shouldn't work well without, in my experience.

Sorry that's an old screenshot; ignore that. I've attached a new screenshot showing the current code. I thought I could get the value of the input checked attribute and apply it the span sibling to get the "fake" checkboxes to stick on form post. However the inputs don't have the checked attribute D:

[trendoman]

The source code in screenshot is surely messed up - I suppose it's not view-source, but inspector code?

Also, there was some change in how "cms:each" works. It now better handles separators. So if you update tags.php from latest github version, you current code won't break, but it is more correct to have it like this:

Code: Select all

<cms:each var=opt_values as='color' sep='||'>
    <label for="colours<cms:show k_count />">
        <input type="checkbox" name="colours[]" id="colours<cms:show k_count />" value="<cms:show color />" > <cms:show color />  
    </label>            
</cms:each>

Next, persisting checked attribute is not a problem - since inside the "cms:form" we have info about submitted inputs. So, what I'm going to do is to run another loop and find if current color exists in the list of selected colors. Despite some overhead (run a loop inside a loop) it's quick:

Code: Select all

<cms:each var=opt_values as='color' sep='||'>
    <label for="colours<cms:show k_count />">

        <cms:set check_on_color_match='' scope='global'/>
        <cms:each frm_colours as='checked_color' sep=','>
            <cms:if checked_color eq color>
                <cms:set check_on_color_match='checked="checked"' scope='global'/>
            </cms:if>
        </cms:each>

        <input type="checkbox" name="colours[]" id="colours<cms:show k_count />" value="<cms:show color />" <cms:show check_on_color_match /> > <cms:show color />  

        <span class="checkmark" <cms:show check_on_color_match /> ></span>
    </label>            
</cms:each>

Hope it helps.

Works a treat! Love your work Trendoman, thanks again