I have a registration screen that is within a modal. Within this modal has some tabs, among them a tab called foreign. I'm trying to put a check box so that if the check box is selected the tab appears, if it is not selected the tab disappears .. I could not do it right.
My js
$("#check").click(function(){
if($(this).val()=="true"){
$("#tabEstrangeiro").css("visibility","visible");
$(this).val("true");
}
else{
$("#tabEstrangeiro").css("visibility","hidden");
$(this).val("false");
}
});
My html
<div class="form-group col-md-12">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" data-target="#dados">Dados</a></li>
<li><a data-toggle="tab" id="tabEstrangeiro" data-target="#estrangeiro">Estrangeiro</a></li>
<li><a data-toggle="tab" data-target="#documentos">Documentos</a></li>
<li><a data-toggle="tab" data-target="#pacientes">Paciente</a></li>
<li><a data-toggle="tab" data-target="#caracteristicas">Características</a></li>
</ul>
<div class="tab-content">
<div id="dados" class="tab-pane fade in active">
<br>
<div class="form-group col-md-4">
<label>Estrangeiro:</label><br>
<label class="checkbox-inline"><input type="checkbox" id="check" ng-model="pessoasCaracteristicas.flagDoador" value="true">Sim</label>
</div>
<div class="form-group col-md-4">
<label>CEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.cep" />
</div>
<div class="form-group col-md-4">
<label>País:</label> <select ng-model="pessoasEnderecos.pais.idPais" class="form-control">
<option value="{{paises.idPais}}" ng-repeat="pais in paises">{{pais.nome}}</option>
</select>
</div>
<div id="outroPais">
<div class="form-group col-md-4">
<label>Cidade:</label> <input maxlength="20" required="required" type="text" class="form-control" ng-model="distrito.nome" />
</div>
</div>
<div id="paisBrasil">
<div class="form-group col-md-4">
<label>Município:</label> <select ng-model="pessoasEnderecos.municipio.idPais" class="form-control">
<option value="{{mun.idMunicipio}}" ng-repeat="mun in municipios">{{mun.nome}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Bairro:</label> <select ng-model="pessoasEnderecos.bairrosIdentidade.idBairro" class="form-control">
<option value="{{bai.idBairro}}" ng-repeat="bai in bairros">{{bai.nome}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Logradouro:</label> <select ng-model="pessoasEnderecos.logradouros.idLogradouro" class="form-control">
<option value="{{log.idLogradouro}}" ng-repeat="log in logradouros">{{log.nome}}</option>
</select>
</div>
<div class="form-group col-md-2">
<label>Número:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.numero" />
</div>
<div class="form-group col-md-2">
<label>Bloco:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.bloco" />
</div>
<div class="form-group col-md-4">
<label>Complemento:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.complemento" />
</div>
<div class="form-group col-md-12">
<p><strong>Informações</strong></p>
</div>
<br>
<div class="form-group col-md-4">
<label>Email:</label> <input maxlength="70" type="email" class="form-control" ng-model="pessoasContatos.contato" />
</div>
<div class="form-group col-md-4">
<label>Telefone:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasContatos.tipoContato.descricao" />
</div>
<div class="form-group col-md-4">
<label>Estado civil:</label> <select ng-model="pessoasFisicas.estadoCivil.idestadoCivil" class="form-control">
<option value="{{estCiv.idEstadoCivil}}" ng-repeat="estCiv in estadosCivis">{{estCiv.descricao}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Raça Cor:</label> <select ng-model="pessoasFisicas.racaCor.idRacaCor" class="form-control">
<option value="{{rac.idRacaCor}}" ng-repeat="rac in racaCor">{{rac.nome}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Nome da mãe:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomeMae" />
</div>
<div class="form-group col-md-4">
<label>Nome do pai:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomePai" />
</div>
<div class="form-group col-md-4">
<label>Nacionalidade:</label> <select ng-model="pessoasFisicas.nacionalidade.idNacionalidade" class="form-control">
<option value="{{nac.idNacionalidade}}" ng-repeat="nac in nacionalidades">{{nac.descricao}}</option>
</select>
</div>
<!-- falta a tabela escolaridade -->
<div class="form-group col-md-4">
<label>Grau de escol.:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="distrito.nome" />
</div>
<div class="form-group col-md-4">
<label>Óbito:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.certidaoObito" />
</div>
</div>
</div>
<div id="documentos" class="tab-pane fade">
<br>
<div class="form-group col-md-4">
<label>CPF:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.cpf" />
</div>
<div class="form-group col-md-4">
<label>RG:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.identidadeRg" />
</div>
<div class="form-group col-md-4">
<label>Orgão Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.orgaoEmissorRg" />
</div>
<div class="form-group col-md-4">
<label>UF Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
</div>
<div class="form-group col-md-4">
<label>Data emissão:</label> <input maxlength="70" required="required" type="date" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
</div>
<!-- somente para estrangeiros -->
<div class="form-group col-md-4">
<label>Data validade:</label> <input maxlength="70" required="required" type="date" class="form-control" />
</div>
<div class="form-group col-md-4">
<label>Título:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.tituloEleitor" />
</div>
<div class="form-group col-md-4">
<label>Zona eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.zonaEleitoral" />
</div>
<div class="form-group col-md-4">
<label>Seção eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pessoasFisicas.secaoEleitoral" />
</div>
<div class="form-group col-md-4">
<label>Profissão:</label> <input maxlength="70" required="required" type="text" class="form-control" />
</div>
<div class="form-group col-md-4">
<label>Carteira profissional:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pessoasFisicas.carteiraProfissional" />
</div>
<div class="form-group col-md-4">
<label>Série Carteira prof.:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pessoasFisicas.serieCarteiraProfissional" />
</div>
<div class="form-group col-md-4">
<label>Emissão Carteira prof.:</label> <input maxlength="70" required="required" type="date" class="form-control"
ng-model="pessoasFisicas.emissaoCarteiraProfissional" />
</div>
<div class="form-group col-md-4">
<label>PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.pispasep" />
</div>
<div class="form-group col-md-4">
<label>Data cadastro PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pessoasFisicas.dataCadastroPisPasep" />
</div>
<div class="form-group col-md-4">
<label>Cart. Reg. Nascimento:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pessoasFisicas.ufOrgaoEmissor" />
</div>
<div class="form-group col-md-4">
<label>Reservista:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.codigoReservista" />
</div>
</div>
<div id="pacientes" class="tab-pane fade">
<br>
<div class="form-group col-md-4">
<label>Nome do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control"
ng-model="pacientes.nomeResponsavel" />
</div>
<div class="form-group col-md-4">
<label>CPF do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cpfResponsavel" />
</div>
<div class="form-group col-md-4">
<label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
</div>
<div class="form-group col-md-4">
<label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
</div>
<div class="form-group col-md-4">
<label>Área:</label> <select ng-model="pacientes.area.idArea" class="form-control">
<option value="{{ar.idArea}}" ng-repeat="ar in areas">{{nac.descricao}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Microarea:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.microarea" />
</div>
<div class="form-group col-md-4">
<label>Família:</label> <select ng-model="pacientes.familia.idFamilia" class="form-control">
<option value="{{fam.idFamilia}}" ng-repeat="fam in familias">{{fam.nome}}</option>
</select>
</div>
<div class="form-group col-md-8">
<label>Alérgico:</label> <label class="checkbox-inline"><input type="checkbox" ng-model="pacientes.flagAlergico" value="">Sim</label>
<textarea class="form-control" ng-model="pacientes.observacoesAlergias" rows="3" id="obsAlergico"></textarea>
</div>
</div>
<div id="caracteristicas" class="tab-pane fade">
<br>
<div class="form-group col-md-4">
<label>Profissão:</label> <select ng-model="pessoasCaracteristicas.cbor.idCbor" class="form-control">
<option value="{{cb.idCbor}}" ng-repeat="cb in cbors">{{cb.nome}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Estatura:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
</div>
<div class="form-group col-md-4">
<label>Peso:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.peso" />
</div>
<div class="form-group col-md-4">
<label>Família:</label> <select ng-model="pessoasCaracteristicas.corOlhos.idCor" class="form-control">
<option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
</select>
</div>
<!-- ??????/ -->
<div class="form-group col-md-4">
<label>Tipo sanguíneo:</label> <select ng-model="pessoasCaracteristicas.tipoSanguineo.idtipoSanguineo" class="form-control">
<option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Orientação sexual:</label> <select ng-model="pessoasCaracteristicas.orientacao.idOrientacao" class="form-control">
<option value="{{or.idOrientacao}}" ng-repeat="or in orientacoesSexuais">{{or.descricao}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Identidade de gênero:</label> <select ng-model="pessoasCaracteristicas.identidadeGenero.idIdentidade" class="form-control">
<option value="{gener.idIdentidade}}" ng-repeat="gener in identidadesGenero">{{gener.descricao}}</option>
</select>
</div>
<div class="form-group col-md-2">
<label>Deficiente:</label> <br> <label class="checkbox-inline"><input type="checkbox"
ng-model="pessoasCaracteristicas.flagDeficiente" value="">Sim</label>
</div>
<div class="form-group col-md-2">
<label>Doador:</label><br> <label class="checkbox-inline"><input type="checkbox" ng-model="pessoasCaracteristicas.flagDoador"
value="">Sim</label>
</div>
</div>
<div id="estrangeiro" class="tab-pane fade">
<br>
<div class="form-group col-md-4">
<label>Ano de chegada:</label> <input maxlength="5" required="required" type="date" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
</div>
<div class="form-group col-md-4">
<label>Tipo de visto:</label> <input maxlength="5" required="required" type="text" class="form-control" ng-model="pessoasCaracteristicas.peso" />
</div>
</div>