选中某些复选框时，将显示输入文本。并且在取消选中时将被隐藏

Question

因此，有四个复选框...供暖，交流电，冷链等。

选中“其他”时，隐藏的输入文本将显示一个占位符“请指定” ...，而未选中时，输入文本框将显示为“不显示”。

请注意，其他值（加热，交流，冷链）使用相同的输入文本框。

这是我的代码：

andInitialTrackingToken()

$(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());
});

Answer 1

我想问题是当您选择“其他”时，没有显示ID为input的{​​{1}}。

我添加了以下代码：

#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());
});