當我檢查複選框時隱藏/顯示多個輸入字段

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

讓我知道這對你的作品。