Как напечатать новое значение флажка после его проверки?

Question

Я построил форму, в которой я установил флажки со значениями, хранящимися в базе данных PostGreSQL (вы можете увидеть фрагмент).Флажки отмечены или не отмечены автоматически.Теперь, если я выберу другое значение флажка, я бы хотел отобразить его в виде «alert» или «console.log».
Как мне это сделать в Javascript или Jquery?

Большое спасибо за помощь!

    <div class="form-row">
    <div id="man-compo" class="form-group col-md-12">
    <label for="exampleInputPassword1">Composition (le texte hagiographique est composé de) :</label><br>          
         <?php
          foreach ($checked116 as $value) {  
             $array12 = array("Textes historiographiques","Actes de la pratique","Textes grammaticaux","Lettres et ars dictaminis","Vers et inscriptions métriques","Lexique","Comput","Algèbre et géométrie","Autres");
             $checked = "";
             if(in_array($value, $array12)){
                $checked = "checked";
                  echo '<input type="checkbox" id= "checked-man-compo-compo-1" name="checkedmancompocompo1[]" value="'.$value.'" '.$checked.' > '.$value.' <br/>';
                }
             }
           foreach ($array12 as $i) {
             $checked = "";
             if(in_array($i, $checked116)){
             }
             else {
             echo '<input type="checkbox" id= "notchecked-man-compo-compo-1" name="notcheckedmancompocompo1[]" value="'.$i.'" '.$checked.' > '.$i.' <br/>';
             }
           }
          ?>

Answer 1

Вот простой пример того, что вы пытаетесь сделать в простом JavaScript, который вы можете изменить / применить к своему коду.

//get all checkboxes beginning with id 'checkbox'
let checkboxes = document.querySelectorAll( "[ id^=checkbox ]" );

//add event listener to each checkbox, upon being checked/unchecked to print out value
for ( let i = 0; i < checkboxes.length; i++ ) {
	checkboxes[ i ].addEventListener( "change", function() {
		
  	console.log( checkboxes[ i ].value );
  });
}

<label for="checkbox1"> checkbox 1 </label>
<input type="checkbox" id="checkbox1" value=1>

<label for="checkbox2"> checkbox 2 </label>
<input type="checkbox" id="checkbox2" value=2>

<label for="checkbox3"> checkbox 3 </label>
<input type="checkbox" id="checkbox3" value=3>

<label for="checkbox4"> checkbox 4 </label>
<input type="checkbox" id="checkbox4" value=4>

Надеюсь, это вам поможет.