JSFiddle - React, Tailwind, and code Playground

by Tableless Padrões Web

HTML

<div class="control-group">
    <label rel="tooltip" title="Autenticação é o processo para assegurar que o comprador é realmente aquele quem diz ser">Tipo de autenticação:</label>
    <div class="controls">
        <label class="dblock"><input name="authentication-type" type="radio"> Não autenticado</label>
        <label class="control-label">
            <input name="authentication-type" type="radio" data-toggle="collapse" data-target="#authOpt"> Autenticado
        </label>
        <div class="collapse" id="authOpt">
            <div class="boxGrayOpt">
                <input class="boolean optional" id="redecard_ws_setting_check_zip_on_avs" name="redecard_ws_setting[check_zip_on_avs]" type="checkbox" checked value="1"><label class="boolean optional" for="redecard_ws_setting_check_zip_on_avs"> CPF</label>
                <input class="boolean optional" id="redecard_ws_setting_check_cpf_on_avs" name="redecard_ws_setting[check_cpf_on_avs]" type="checkbox" value="1"><label class="boolean optional" for="redecard_ws_setting_check_cpf_on_avs"> Endereço</label>
                <input class="boolean optional" id="redecard_ws_setting_check_address_on_avs" name="redecard_ws_setting[check_address_on_avs]" type="checkbox" value="1"><label class="boolean optional" for="redecard_ws_setting_check_address_on_avs"> CEP</label>
            </div>
        </div>
    </div>
</div>

JavaScript

$('input[name="authentication-type"]').change(function () {
    var dt = $(this).attr('data-target');
    var divcontrols = $(this).parents('.controls');
    var anychecked = $('.collapse input[type="checkbox"]:checked', divcontrols);
    if ( anychecked.length || typeof(dt) != 'undefined' ) {
        $('.collapse'+dt, divcontrols).show();
    } else {
        $('.collapse', divcontrols).hide();
    }
  })