Введенный текст появится, когда установлен определенный флажок.И будет скрыт при снятии флажка

Question

Итак, есть четыре флажка ... Обогрев, AC, Cold Chain и др.

Когда установлен флажок «Others», скрытый вводимый текст будет отображаться с заполнителем «Пожалуйста, укажите» ..... и если этот флажок снят, текстовое поле ввода будет отображаться "не отображать".

Обратите внимание, что другие значения (Отопление, AC, Холодная цепь) используют то же текстовое поле ввода.

Вот мой код:

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        selectedValue=$(this).attr("value");
        
        CountSelectedCB.length = 0;
        
         if(selectedValue==="Others" && $(this).is(":checked")){
                  uncheckAllCheckBox();
                   $(this).prop('checked', true);
                    CountSelectedCB.push(selectedValue);
         }
         else{
         $("input:checkbox").each(function() {
         if($(this).attr("value")==="Others")
              $(this).prop('checked', false);
              
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("value"));
            }
        });
         }         
        
        
        $('input[name=solutions]').val(CountSelectedCB).blur();
    });
}

function uncheckAllCheckBox(){
 $("input:checkbox").each(function() {
       $(this).prop('checked', false);
       CountSelectedCB.length=0;
 });
}

$(document).ready(displayRadiobox);

CountSelectedRB = [];

function displayRadiobox(){    
    $("input:radio").change(function() {          
        selectedRB = [];
        notSelectedRB = [];
        
        CountSelectedRB.length = 0;
        $("input:radio").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedRB.push($(this).attr("value"));
            }
        });
        
        $('input[name=existing]').val(CountSelectedRB).blur(); 
    });
} 


$('#solutions, #existing').bind('keyup blur', function() {
        
    $('#summary').val('You are looking for solutions in ' + 
                             $('#solutions').val() + 
                             (' \n') +
                             'Are you using an existing customer? ' + 
                             $('#existing').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">


<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>

<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>

Answer 1

Я думаю, проблема в том, что input с идентификатором #specify не отображается, когда вы выбираете "Другое".

Я добавил этот код:

$("#specify").attr("placeholder","Please specify").show();
$("#solutions").hide();

Это то, что вы хотите?

Демо

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox() {       
  $("input:checkbox").change(function() {                 
    selectedCB = [];        
    notSelectedCB = [];
    selectedValue = $(this).attr("value");                
    CountSelectedCB.length = 0;

    if (selectedValue === "Others" && $(this).is(":checked")) {
      uncheckAllCheckBox();
      $(this).prop('checked', true);
      CountSelectedCB.push(selectedValue);
      $("#specify").attr("placeholder","Please specify").show();
      $("#solutions").hide();
    } else {
      $("input:checkbox").each(function() {
        if ($(this).attr("value") === "Others")
          $(this).prop('checked', false);

        if ($(this).is(":checked")) {
          CountSelectedCB.push($(this).attr("value"));
        }
      });
      $("#specify").hide();
      $("#solutions").show();
    }                        
    $('input[name=solutions]').val(CountSelectedCB).blur();    
  });
}

function uncheckAllCheckBox() {
  $("input:checkbox").each(function() {
    $(this).prop('checked', false);
    CountSelectedCB.length = 0;
  });
}

$(document).ready(displayRadiobox);

CountSelectedRB = [];

function displayRadiobox() {       
  $("input:radio").change(function() {                 
    selectedRB = [];        
    notSelectedRB = [];                
    CountSelectedRB.length = 0;        
    $("input:radio").each(function() {            
      if ($(this).is(":checked")) {                
        CountSelectedRB.push($(this).attr("value"));            
      }        
    });                
    $('input[name=existing]').val(CountSelectedRB).blur();     
  });
}


$('#solutions, #existing').bind('keyup blur', function() {            
  $('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
  <input type="checkbox" value="Heating">Heating<br>
  <input type="checkbox" value="Ac">AC<br>
  <input type="checkbox" value="Cold Chain">Cold Chain<br>
  <input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">


<div><br>Are you an exisiting customer?<br>
  <input type="radio" value="Yes" name="radio">Yes<br>
  <input type="radio" value="No" name="radio">No
</div>

<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>