Liquid code if checkbox is checked the textbox appears

[Vilmantas]

Hi all,

i have a liquid code for checkbox and for textbox. I need the textbox to appear only when checkbox is checked. and when its unchecked i need it to be hidden. Can somebody help me? What the code for IF should be and where should i put it?

{% assign field_label = "Reikalingas siuvinėjimas" %}
{% assign required_field = false %}
{% assign position = "middle" %}
{% assign checked_value = "Yes" %}
{% assign hide_checkout = false %}

{% comment %}
Use the code below to add a link in the checkbox text

<a href='' target='_blank'>

</a>

{% endcomment %}

{% comment %} 
Do not edit the code below
{% endcomment %}

{% assign gen_id = field_label | remove: " " | strip | downcase %}

<div class="checkbox-container">
    <fieldset class="product-form__input line-item-property__field"
        data-input-type="checkbox">
        <input id="{{ gen_id }}"
            class="input-checkbox required__check {% if required_field %}required__field{% endif %}"
            form="product-form-{{ section.id }}"
            type="checkbox"
            name="properties[{% if hide_checkout %}_{% endif %}{{ field_label | strip_html }}]"
            value="{{ checked_value }}"
            data-controller-form-label="{{ field_label }}"
            {% if required_field %}required{% endif %}>
        
        <label for="{{ gen_id }}" class="form__label checkbox__label checkbox__align_{{ position }}">
            {{ field_label }}
        </label>
    </fieldset>
</div>

<style>
    .form__label {
        max-width: 37rem;
        margin-bottom: 0.6rem !important;
    }

    input[type="checkbox"] {
        cursor: pointer;    
    }
    
    .checkbox__label {
        display: inline-block;
        max-width: 85%;
    }
    
    .checkbox__align_top {
        vertical-align: top;
    }
    
    .checkbox__align_middle {
        vertical-align: middle;
    }
    
    .checkbox__align_bottom {
        vertical-align: bottom;
    }
    
    .checkbox__label > p {
        margin: 2px 0px;
    }
    
    .checkbox-container, .checkbox-container > fieldset {
        margin: 5px 0px;
    }
</style>

{% assign field_label = "Įrašyti vardą arba tekstą (max. 3 žodžiai)" %}
{% assign min_characters = 0 %}
{% assign max_characters =  %}
{% assign placeholder_text = "" %}
{% assign required_field = false %}
{% assign spellchecker = true %}
{% assign hide_checkout = false %}

{% assign regular_expression = "^[^<>\\\{\\\}]*$" %}

{% assign expression_title = "The following values are not allowed < > { }" %}

{% assign validation_type = "key" %}

{% comment %} 
Do not edit the code below
{% endcomment %}

{% assign gen_id = field_label | remove: " " | strip | downcase %}

<fieldset class="js product-form__input line-item-property__field text-field"
    data-input-type="text">

    <label for="{{ gen_id }}" class="form__label required__check">{{ field_label }}</label>

    <div class="field text-field">
        <input 
	    id="{{ gen_id }}" 
	    class="select__select custom-text-input required__check {% if required_field %}required__field{% endif %}"            
            form="product-form-{{ section.id }}" 
            type="text" 
            minlength="{{ min_characters }}" 
            {% if max_characters > 0 %}maxlength="{{ max_characters }}"{% endif %} 
            placeholder="{{ placeholder_text }}"
            name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]" 
            value="{{ value | escape }}"
            title="{{ expression_title }}"
            {% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %} 
            data-controller-form-label="{{ field_label }}"
	        {% if required_field %}required{% endif %}
            {% if spellchecker %}spellcheck="true"{% endif %}
data-validation-type="{{  validation_type }}">
    </div>
</fieldset>

<style>
    .form__label {
        max-width: 37rem;
        margin-bottom: 0.6rem !important;
    }

    .product-form__input input[type='text'] {
        cursor: text;
    }
</style>

[Dan-From-Ryviu]

Hi @Vilmantas

Add this additional script to the end of your existing code to do that.

[Vilmantas]

Thanks for your answer but that didnt do the trick.

The textbox is still visible all the time

.

[Dan-From-Ryviu]

Please update your code to this and check again

{% assign field_label_checkbox = "Reikalingas siuvinėjimas" %}
{% assign required_field_checkbox = false %}
{% assign position_checkbox = "middle" %}
{% assign checked_value = "Yes" %}
{% assign hide_checkout_checkbox = false %}

{% comment %}
Use the code below to add a link in the checkbox text

{% endcomment %}

{% comment %} 
Do not edit the code below
{% endcomment %}

{% assign gen_id_checkbox = field_label_checkbox | remove: " " | strip | downcase %}

    

{% assign field_label_text = "Įrašyti vardą arba tekstą (max. 3 žodžiai)" %}
{% assign min_characters = 0 %}
{% assign max_characters =  %}
{% assign placeholder_text = "" %}
{% assign required_field_text = false %}
{% assign spellchecker = true %}
{% assign hide_checkout_text = false %}

{% assign regular_expression = "^[^<>\\\{\\\}]*$" %}

{% assign expression_title = "The following values are not allowed < > { }" %}

{% assign validation_type = "key" %}

{% comment %} 
Do not edit the code below
{% endcomment %}

{% assign gen_id_text = field_label_text | remove: " " | strip | downcase %}

[Vilmantas]

Perfect! It worked. Thanks a lot Dan!

[Dan-From-Ryviu]

You are very welcome @Vilmantas