Select checkbox and show a select

Question

I intend to select the checkbox make a select visible.

Code:

$("#check").click(function() {
    if ($(this).val() == "Sim") {
        $("#Acompnhante").css("visibility", "visible");
        $(this).val("false");
    } else {
        $("#Acompnhante").css("visibility", "hidden");
        $(this).val("Sim");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">  
    <label for="IniciarTarefa">Tarefa a Par</label>
    <input type="checkbox" name="check" id="check" value="Sim"/> 
    <div class="form-group input-group input-group-lg">
        <span class="input-group-addon">
            <span class="fa fa-universal-access"></span>
        </span>
        <select class="form-control" name="Acompnhante" id="Acompnhante" required="" placeholder="Acesso">
            <option></option>
            <option value="1">Sim</option>
        </select>
    </div>
</div>

It’s happening, but only after selecting the checkbox and withdraw the selection again and I intend that as soon as entering the page the select appears hidden and only in the case of selecting the checkbox make visible the select.

Answer 1

What you want is for select to be hidden by default (by clicking), and this action will only happen in the click depending on your code.

You can do this two ways:

CSS:

select[name="Acompnhante"] {
  visibility: hidden;
}

Below the demonstration:

$("#check").click(function(){
    if($(this).val()=="Sim"){
        $("#Acompnhante").css("visibility","visible");
        $(this).val("false");
    }
    else{
        $("#Acompnhante").css("visibility","hidden");
       $(this).val("Sim");
    }
});

select[name="Acompnhante"] {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">  
<label for="IniciarTarefa">Tarefa a Par</label>
<input type="checkbox" name="check" id="check" value="Sim"/> 
<div class="form-group input-group input-group-lg">
    <span class="input-group-addon">
    <span class="fa fa-universal-access"></span>
    </span>
    <select class="form-control" name="Acompnhante" id="Acompnhante" required="" placeholder="Acesso">
	  <option></option>
      <option value="1">Sim</option>
    </select>
  </div>
</div>

Or js, adding this line before your logic:

$("#Acompnhante").css("visibility","hidden"); // <-- acrescento desta linha
$("#check").click(function(){
    if($(this).val()=="Sim"){
        $("#Acompnhante").css("visibility","visible");
        $(this).val("false");
    }
    else{
        $("#Acompnhante").css("visibility","hidden");
       $(this).val("Sim");
    }
});