未选中复选框时隐藏输入

Question

我想在未选中输入时隐藏输入，并在选中时显示相同的输入。

当 input type="checkbox" 未被选中时，我将如何使用 .txtCal 类隐藏 input type="text" 复选框？并在检查时显示？

jQuery(function($) {


  // ingrédients allergènes
 $('div.tags').delegate('input:checkbox', 'change', function() {
    var list = $('.results > li').hide();
    // var inputxtCal = $('.txtCal').hide();
    //For each one checked
    $('input:checked').each(function() {
      list.filter('.' + $(this).attr('rel')).show();
      
    });
  }).find('input:checkbox').change();  

  $(".tags").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;
     
       $(".tags .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
      <label><input type="checkbox" checked rel="ingredient-1"> ingredient 1 </label><br><input type="text" class='txtCal'  /><br>
      <label><input type="checkbox" checked rel="ingredient-2"> ingredient 2 </label><br><input type="text" class='txtCal' /><br>
      <label><input type="checkbox" checked rel="ingredient-3"> ingredient 3 </label><br><input type="text" class='txtCal' /><br>
      <span><b>TOTAL  :</b></span><b><span id="total_sum_value"></span></b>
    </div>
        <ul class="results">
             <li class="ingredient-1 ingredient-3">Alpha isomethylionone</li>
             <li class="ingredient-1">Amyl cinnamal (Jasmonal A)</li>
             <li class="ingredient-1">Amylcinnamyl alcohol</li>
             <li class="ingredient-1">Anisyl alcohol</li>
             <li class="ingredient-1 ingredient-2">Benzyl alcohol</li>
             <li class="ingredient-1 ingredient-2 ingredient-3">Benzyl benzoate</li>
             <li class="ingredient-2">Benzyl cinnamate</li>
             <li class="ingredient-2">Benzyl salicylate</li>
             <li class="ingredient-2">Butylphenyl methylpropional (Lilial)</li>
             <li class="ingredient-2 ingredient-3">Cinnamal</li>
             <li class="ingredient-3">Cinnamyl alcohol</li>
             <li class="ingredient-3">Citral</li>
             <li class="ingredient-3">Citronellol</li>
             <li class="ingredient-3">Coumarin</li>
        </ul>

Answer 1

jQuery(function($) {


  // ingrédients allergènes
 $('div.tags').delegate('input:checkbox', 'change', function() {
    $(this).parent().nextAll().slice(0, 2).hide();
    var list = $('.results > li').hide();
    // var inputxtCal = $('.txtCal').hide();
    //For each one checked
    $('input:checked').each(function() {
      list.filter('.' + $(this).attr('rel')).show();
      $(this).parent().nextAll().slice(0, 2).show();
    });
  }).find('input:checkbox').change();  

  $(".tags").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;
     
       $(".tags .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
      <label><input type="checkbox" checked rel="ingredient-1"/> ingredient 1 </label><br><input type="text" class='txtCal'  /><br>
      <label><input type="checkbox" checked rel="ingredient-2"/> ingredient 2 </label><br><input type="text" class='txtCal' /><br>
      <label><input type="checkbox" checked rel="ingredient-3"> ingredient 3 </label><br><input type="text" class='txtCal' /><br>
      <span><b>TOTAL  :</b></span><b><span id="total_sum_value"></span></b>
    </div>
        <ul class="results">
             <li class="ingredient-1 ingredient-3">Alpha isomethylionone</li>
             <li class="ingredient-1">Amyl cinnamal (Jasmonal A)</li>
             <li class="ingredient-1">Amylcinnamyl alcohol</li>
             <li class="ingredient-1">Anisyl alcohol</li>
             <li class="ingredient-1 ingredient-2">Benzyl alcohol</li>
             <li class="ingredient-1 ingredient-2 ingredient-3">Benzyl benzoate</li>
             <li class="ingredient-2">Benzyl cinnamate</li>
             <li class="ingredient-2">Benzyl salicylate</li>
             <li class="ingredient-2">Butylphenyl methylpropional (Lilial)</li>
             <li class="ingredient-2 ingredient-3">Cinnamal</li>
             <li class="ingredient-3">Cinnamyl alcohol</li>
             <li class="ingredient-3">Citral</li>
             <li class="ingredient-3">Citronellol</li>
             <li class="ingredient-3">Coumarin</li>
        </ul>