Hiding and showing tab within a modal using check

0

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>
    
asked by anonymous 07.11.2017 / 14:24

2 answers

1

You can use .is(':checked') and you can also use .hide() and .show() to hide or show the element.

Update:

For the "Alien" tab come hidden, or you hide it with display: none or you can use a trigger as I put below:

<script>
$("#check").click(function(){

    if($(this).is(':checked')){
    $("#tabEstrangeiro").show();
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").hide();
    $(this).val("false");
  }

});

$("#check").trigger('click');
</script>

Test:

$("#check").click(function(){

    if($(this).is(':checked')){
    $("#tabEstrangeiro").show();
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").hide();
    $(this).val("false");
  }

});

$("#check").trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<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" checked="checked" 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>
    
07.11.2017 / 14:43
0

Try this:

$("#check").click(function(){

  if($(this).is(':checked')){
    $("#tabEstrangeiro").css("visibility","visible");
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").css("visibility","hidden");
    $(this).val("false");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<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>

I just made one change to your code:

if($(this).is(':checked'))

In this way it will check whether checkbox is checked or not and will display or hide the 'foreign' tab.

    
07.11.2017 / 14:37