Wie wird das Eingabefeld angezeigt, wenn das Kontrollkästchen bereits aktiviert ist?

Question

Ich habe PHP für Schleife, die seine 12 Checkbox mit Eingabefeld zurückgeben.

<div class="row"> 
    <div class="col-md-4"> 
    <?php          
    $getChannel = mysqli_query($conn, "SELECT ch_id, ch_name, ch_for FROM channel WHERE lg_id = '$lg_id' "); 

    $ch_for  = array(); 
    $ch_name = array(); 

    while ($fetchChannel = mysqli_fetch_array($getChannel)) { 
     $ch_id  = (int) $fetchChannel['ch_id']; 
     $ch_for[] = htmlspecialchars($fetchChannel['ch_for']); 
     $ch_name[] = htmlspecialchars($fetchChannel['ch_name']); 
    } 

    for ($x=1; $x<=12; $x++) { 
     if( in_array('ch'.$x, $ch_name)) { 
      $sel = 'checked = "checked" '; 
     } else { 
      $sel = ''; 
     } 
     ?> 

     <div class="checkbox form-inline"> 
      <label><input <?php echo $sel; ?> type="checkbox" name="ch_name[]" value="ch<?php echo $x; ?>">CH<?php echo $x; ?></label> 
      <input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for"> 
     </div>          
     <?php 
    } 
    ?>          
</div> 

Wenn $ch_name gegen die for-Schleife abgestimmt ist, dann überprüft 'ch'.$x I das Kontrollkästchen.

Jetzt möchte ich entsprechende Eingabefeld mit jQuery zeigen, in dem Kontrollkästchen bereits aktiviert ist.

jQuery-Code:

$('.ch_for').hide(); 

if ($('.checkbox input:checkbox:checked').length > 0) {   
    $(this).closest('.checkbox').find('.ch_for').show(); 
} 

$('.checkbox input:checkbox').on('click', function(){ 
    $(this).closest('.checkbox').find('.ch_for').toggle('slow'); 
}) 

Answer 1

Was Sie suchen, ist die .each Funktion:

// no-conflict safe document ready (shorthand version) 
jQuery(function($) { 
    // hide all of the inputs initially 
    $('.ch_for').hide(); 

    // your original function to show/hide on click 
    $('.checkbox input:checkbox').on('click', function() { 
     $(this).closest('.checkbox').find('.ch_for').toggle('slow'); 
    }); 

    // put this in a function for reusability 
    function showInputs() { 
     // use .each to loop over every checked input 
     $('.checkbox input:checkbox:checked').each(function() {   
      // inside .each, $(this) refers to the checkbox element 
      $(this).closest('.checkbox').find('.ch_for').show(); 
     }); 
    } 

    // call the function on initial load 
    showInputs(); 
});