Come selezionare tutte le caselle di controllo utilizzando JavaScript in una riga di tabella emessa da PHP

Question

Sono nuovo di PHP. Voglio creare uno script per controllare tutte le caselle di controllo di seguito, ma sono bloccato.

PROBLEMA

codice non funziona con il ciclo.

Qui è la mia uscita

Quando controllo la casella di controllo sotto la colonna conclusioni Voglio controllare automaticamente tutte le caselle di controllo nella stessa riga.

Ecco il mio codice

Per il rendering dei dati e caselle di controllo per ogni riga Io uso un ciclo PHP lato server

JavaScript:

<script>  
$('.allcb').on('click', function() { 
    $(this).parent().parent().parent().parent().find('.chk').prop('checked', this.checked); 
}); 
</script> 

HTML:

<?php 
     for ($i=0; $i<count($opinion); $i++) { 
    //if ($opinion[$i] == "")continue; 
     ?> 
      <tr> 
      <td> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />--> 

     <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" /> 
     <?php echo $opinion[$i]?> 
    </td> 
    <td> 
     <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" /> 
     <?php echo $action[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" /> 
     <?php echo $long_term[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" /> 
     <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?> 
    </td> 
    <td> 
     <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" /> 
     <?php echo $short_term[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" /> 
     <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?> 
    </td> 
    <td> 
     <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" /> 
     <?php echo $outlook[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" /> 
     <?php echo $rating_type[$i] ?> 
    </td> 
    </tr> 
<?php 
     } 
?> 

Answer 1

Un modo semplice sarebbe se si aggiungesse qualche identificatore a TR s in modo che lo checkbox "sapesse" quali caselle di controllo si trovano nella stessa riga.

Sarebbe anche possibile controllando i nodi parent ma questo potrebbe essere un po 'instabile (si pensi alla ristrutturazione della tabella, ad esempio).

function toggleRowCbs(cb) { 
 
    var cbs = document.getElementById(cb.dataset.rowid).querySelectorAll('[type="checkbox"]'); 
 
    [].forEach.call(cbs, function(x) { 
 
    x.checked = cb.checked; 
 
    }); 
 
}

table, 
 
tr, 
 
td, 
 
th { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
    text-align: left; 
 
    padding: 2pt 4pt; 
 
}

<table> 
 
    <tr> 
 
    <th>Optionion</th> 
 
    <th>Action</th> 
 
    <th colspan="4">Ratings</th> 
 
    <th>Outlook</th> 
 
    <th>Rating Type</th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th colspan="2">Long Term</th> 
 
    <th colspan="2">Short Term</th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th>Current</th> 
 
    <th>Previous</th> 
 
    <th>Current</th> 
 
    <th>Previous</th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr id="row1"> 
 
    <td> 
 
     <input type="checkbox" data-rowid="row1" onchange="toggleRowCbs(this)" />Foobar 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Maintain 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A+ 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A+ 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A1 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A1 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Stable 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Entity 
 
    </td> 
 
    </tr> 
 
    <tr id="row2"> 
 
    <td> 
 
     <input type="checkbox" data-rowid="row2" onchange="toggleRowCbs(this)" />Foobar #2 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Maintain 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A+ 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A+ 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A1 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />A1 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Stable 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" />Entity 
 
    </td> 
 
    </tr> 
 
</table>

Così il vostro codice PHP sarebbe simile a questa:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<?php 
    for ($i=0; $i<count($opinion); $i++) { ?> 
     <tr id="row<?php echo $i ?>"> 
     <td> 
     <input type="checkbox" data-rowid="row<?php echo $i ?>" onchange="toggleRowCbs(this)" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" /> 
     <?php echo $opinion[$i]?> 
    </td> 
    <td> 
     <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" /> 
     <?php echo $action[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" /> 
     <?php echo $long_term[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" /> 
     <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?> 
    </td> 
    <td> 
     <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" /> 
     <?php echo $short_term[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" /> 
     <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?> 
    </td> 
    <td> 
     <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" /> 
     <?php echo $outlook[$i] ?> 
    </td> 
    <td> 
     <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" /> 
     <?php echo $rating_type[$i] ?> 
    </td> 
    </tr> 
<?php } ?> 

Poiché si tratta di una vaniglia JavaScript soluzione che utilizza querySelectorAll, dataset e Array.prototype.forEach questo potrebbe non essere in esecuzione su tutti browser che vuoi

Answer 2

$('.allcb').on('click', function() { 
 
    $(this).parent().siblings().find('.chk').prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" /> 
 
     <?php echo $opinion[$i]?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" /> 
 
     <?php echo $action[$i] ?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" /> 
 
     <?php echo $long_term[$i] ?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" /> 
 
     <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" /> 
 
     <?php echo $short_term[$i] ?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" /> 
 
     <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" /> 
 
     <?php echo $outlook[$i] ?> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" /> 
 
     <?php echo $rating_type[$i] ?> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

Se si desidera controllare tutte le caselle di controllo utilizzando JavaScript,

È possibile dare a tutti la casella di controllo di una classe,

e poi

var a = document.getElementsByClassName("yourClassName"); for(var key in a) { a[key].checked = true; }

o

se si desidera utilizzare jQuery,

$(".yourClassName").attr("checked",true); 

Answer 4

Simple use this : 

$(document).ready(function(){ 
    $('.allcb').on('click', function(){ 
    $(this).parent("td").parent("tr").find('.chk').prop('checked', this.checked); 

    }); 
}); 

Answer 5

Si può provare questo,

$('.allcb').on('click', function(){ 
     $(this).closest('tr').find('.chk').prop('checked', this.checked); 
}); 

O

$('.allcb').on('click', function(){ 
     $(this).parents('tr').find('.chk').prop('checked', this.checked); 
}); 

questo è solo risposta Pekka con 1 linea più.

Answer 6

È possibile farlo aggiungendo un tipo di riferimento sulle altre caselle di controllo alla casella di controllo principale che si sta verificando. Quindi, quando si fa clic sulla casella di controllo principale, è possibile controllare gli altri. Come questo:

Javascript:

$('.allcb').on('click', function(){ 
     var index = $(this).data('index'); 

     if ($(this).is(':checked')) 
     { 
      $('.childChk' + index).prop('checked', true); 
     } 
     else 
     { 
      $('.childChk' + index).prop('checked', false); 
     } 
    }); 

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <?php 
      for ($i=0; $i<count($opinion); $i++) { 
     //if ($opinion[$i] == "")continue; 
      ?> 
       <tr> 
       <td> 
       <!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />--> 

      <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" data-index="<?=$i?>" value="<?php echo $opinion[$i]?>" /> 
      <?php echo $opinion[$i]?> 
     </td> 
     <td> 
      <input type="checkbox" name="action[]" class="chk chkChild<?=$i?>" value="<?php echo $action[$i] ?>" /> 
      <?php echo $action[$i] ?> 
     </td> 
     <td> 
      <input type="checkbox" name="long_term[]" class="chk chkChild<?=$i?>" value="<?php echo $long_term[$i] ?>" /> 
      <?php echo $long_term[$i] ?> 
     </td> 
     <td> 
      <input type="checkbox" name="p_long_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" /> 
      <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?> 
     </td> 
     <td> 
      <input type="checkbox" name="short_term[]" class="chk chkChild<?=$i?>" value="<?php echo $short_term[$i] ?>" /> 
      <?php echo $short_term[$i] ?> 
     </td> 
     <td> 
      <input type="checkbox" name="p_short_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" /> 
      <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?> 
     </td> 
     <td> 
      <input type="checkbox" name="outlook[]" class="chk chkChild<?=$i?>" value="<?php echo $outlook[$i] ?>" /> 
      <?php echo $outlook[$i] ?> 
     </td> 
     <td> 
      <input type="checkbox" name="rating_type[]" class="chk chkChild<?=$i?>" value="<?php echo $rating_type[$i] ?>" /> 
      <?php echo $rating_type[$i] ?> 
     </td> 
     </tr> 
    <?php 
      } 
    ?> 

Si noti che ho aggiunto il $ i contrasto con il vostro bambino classe di caselle di controllo. Questo non cambierà il comportamento di nessun elemento DOM.

EDIT:

NON è possibile chiamare la libreria jQuery all'interno del ciclo. La libreria jQuery DEVE essere chiamata solo una volta. Se chiami più volte, tutte le soluzioni presentate qui non funzioneranno.

Answer 7

Questa soluzione gioca piacevole con elementi dinamici, e usa className all'identità della fila (.option-row) invece di basarsi su tagName in modo che non si è impegnata ad utilizzare elementi specifici per visualizzare i dati.

Assicurarsi di includere un riferimento a jquery.js prima di chiamare la funzione $ (come nell'esempio seguente). ..

// check or uncheck all boxes with class 'chk' when 'allcb' is clicked 
 
$(document).on('click', '.allcb', function() { 
 
    $('.chk',$(this).closest('.option-row')).prop('checked', this.checked); 
 
}); 
 

 
// simulate PHP; render some rows for demo 
 
var html = []; 
 
for (var i = 0; i < 5; i++) { 
 
    html.push('<tr class="option-row"><td><input type="checkbox" class="allcb cb"/></td><td><input type="checkbox" class="chk"/></td><td><input type="checkbox" class="chk"/></td></tr>'); 
 
} 
 
$("tbody").html(html.join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Opinion</th> 
 
     <th>Column A</th> 
 
     <th>Column B</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>