JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<p>Switch inputfields by selection radiobuttons</p><br/>

<form id="formValidation">
<table width="100%" cellpadding="0" style="border:0; margin:0;">
    <tbody >
        <tr  >
            <td class="contentTabsTablesDiscription">Bezorgadres</td>
            <td class="postbusORstraat" align="left">
                <span><input  type="radio" name="postbusORstraat" class="formRadioContainter" value="postbus">Postbus</span>
                <span><input  type="radio" name="postbusORstraat" class="formRadioContainter" value="straat">Straat</span>
                    <span class="verfijnResultatenTooltip" title="Factuur adres keuze"></span>
            </td>
         </tr>
        <!-- Scheiding -->
        <tr class="adresKeuze" id="postbus">
            <td style="padding:0;" colspan="4" >
                <table width="100%" style="margin:0;">
                    <tr>
                        <td class="contentTabsTablesDiscription" style="width:158px;">Postbus</td>
                        <td style="border:0;" class="required">
                            <span class="validateMe">
                                <input id="postbusadres" name="postbusadres"  type="text">
                            </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Scheiding -->
        <tr style="display: none;" class="adresKeuze" id="straat">
            <td style="padding:0;" colspan="4">
                <table width="100%" style="margin:0;">
                    <tr>
                        <td class="contentTabsTablesDiscription" style="width:158px;">Straat</td>
                        <td style="border:0;" class="required">
                            <span class="validateMe">
                                <input id="straatnaam" name="bezorgstraat"  type="text" value="" name="factuurstraatstraat">
                            </span>
                        </td>
                    </tr>
      ...

JavaScript

$(function(){
$("input[name=postbusORstraat]").each(function() {
    var soortadres = 'postbus';
    if($("input[name='postbusORstraat']")){
        $("input[name='postbusORstraat']").not("#"+soortadres).attr('checked',false);
        $("input[value="+soortadres+"]").attr('checked',true);
    }

    
    $("input[name=postbusORstraat]").click(function() {
        var values = $(this).val();
        console.log(values,'values1')
        var parent = $(this,".postbusORstraat input").parent().parent().attr('class')
            .replace(/postbusORstraat/ig, "")
            .replace(/formBlock/ig, "").replace(/ /ig, "");
        if(parent === "" || typeof parent === "undefined" || parent === null){
            $(parent+" .adresKeuze").not("#"+values).hide();
            console.log('geen .');
        }else{
            $("."+parent+" .adresKeuze").not("#"+values).hide();
            console.log('met .');
        }
        $("#"+values).show();
        console.log(values,'values2')
    });
});    

});