当我检查复选框时隐藏/显示多个输入字段

Question

我有一个表中有数组中的星期几。每一行，都有一个复选框和两个字段我需要隐藏这个领域中的每一行，当我检查该行复选框

<form action="" method="post" class="form"> 
<table style="width: 100%;"> 
    <thead> 
    <tr> 
     <th>Day</th> 
     <th>Is off</th> 
     <th>Time From</th> 
     <th>Time To</th> 

    </tr> 
    </thead> 
    <tbody> 


    <?php 
    $i = 1; 
    $w_days = array(
     'Saturday' => [0], 
     'Sunday' => [1], 
     'Monday' => [2], 
     'Tuesday' => [3], 
     'Wednesday' => [4], 
     'Thursday' => [5], 
     'Friday' => [6], 
    ); 

    foreach ($w_days as $k => $days) 
    { 
     ?> 

     <tr class="" data-day="<?php echo $k;?>"> 
      <td><?php echo "$k" ?></td> 
      <td class="align_center"><input type="checkbox" id="day_<?php echo $k;?>" class="working_day" onchange="valueChanged()" value="T"/></td> 
      <td> 
       <p> 
         <span class="inline-block"> 
          <input id="timepicker" name="<?php echo $k?>_from" value="" class="day_<?php echo $k;?> timepicker hide"/> 
         </span> 
       </p> 
      </td> 

      <td> 
       <p> 
         <span class="inline-block"> 
          <input name="" value="" class="day_<?php echo $k;?> timepicker hide"/> 
         </span> 
       </p> 
      </td> 
      <script type="text/javascript"> 
       function valueChanged() 
       { 
        $('input:checkbox.check').each(function() { 
         if (!this.checked) { 
          $('.' + $(this).attr('id')).hide(); 
         } 
        }); 
       } 
      </script> 

      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.timepicker').timepicker({ 
         showAnim: 'blind' 
        }); 
       }); 
      </script> 
     </tr> 
     <?php 
     $i++; 
    } 
    ?> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="6"><input type="submit" value="save"/></td> 
    </tr> 
    </tfoot> 
</table> 

，所以我需要当我检查周六复选框周六输入隐藏当我删除复选框星期六输入

Answer 1

你可以做到这一点，而无需调用valueChanged（）onchange，刚刚从onchange删除valueChanged（）。

变化：<input type="checkbox" id="day_<?php echo $k;?>" class="working_day" onchange="valueChanged()" value="T"/>
到
<input type="checkbox" id="day_<?php echo $k;?>" class="working_day" value="T"/>

$(document).ready(function(){ 
    $(document).on('click', 'input.working_day', function(){ 
     var _selector = $(this); 
     var _element_id = _selector.attr('id'); 

     if(_selector.is(':checked')){ 
      $('input.day_' + _element_id).hide(); 
     }else{ 
      $('input.day_' + _element_id).show(); 
     } 
    }); 
}); 

让我知道这对你的作品。