Cdtjkyj

I'm working on creating a custom checkbox with an event

<div class="field tcagreecreateaccount required">

    <div class="control">

        <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" data-validate="{required:false}" class="input-checkbox checkbox required" value="1">

        <label for="tcagreecreateaccount" class="label">

            <?= __('Custom checkbox') ?>

        </label>

    </div>

</div>

1)when the checkbox is ticked need to show
extra two fields in customer registration

2)How I change the checkbox as optional one

How I can do it ???

Any ideas?

Edit 1:

addtional.phtml

<div id="idofyourinputwrapper">

    <div class="field skype required">

        <label class="label" for="skype2">

            <span><?= $block->escapeHtml(__('Check now')) ?></span>

        </label>

        <div class="control">

            <input type="text" name="skype2" id="skype22" value="" title="<?= $block->escapeHtmlAttr(__('Check now')) ?>" class="input-text" data-validate="{required:false}">

        </div>

    </div>



</div>

Try this,

Replace this

<div class="field tcagreecreateaccount required">

<div class="control">

    <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" data-validate="{required:false}" class="input-checkbox checkbox required" value="1">

    <label for="tcagreecreateaccount" class="label">

        <?= __('Custom checkbox') ?>

    </label>

</div>

</div>

with this

<div class="field tcagreecreateaccount">

<div class="control">

    <input type="checkbox" id="tcagreecreateaccount" name="tcagreecreateaccount" class="input-checkbox checkbox" value="1">

    <label for="tcagreecreateaccount" class="label">

        <?= __('Custom checkbox') ?>

    </label>

</div>

</div>

then add the below script in your phtml

require(['jquery'],function($) {

$(document).ready(function () {

var ckbox = $('#tcagreecreateaccount');

$('#tcagreecreateaccount').on('click',function () {

    if (ckbox.is(':checked')) {

        $('#idofyourinputwrapper').show(); //idofyourinputwrapper is your input wrapper

    } else {

        $('#idofyourinputwrapper').hide();

    }

});

});

});

wrap your two inputs with a div like below.

<div id="idofyourinputwrapper">

Hope this helps :)

Firstly remove required from your checkbox and other two attributes.

Both attributes depending on checkbox click will be hidden by default (can do with CSS or JS).

On checkbox click, you can use jQuery to display both attributes.