On-Screen Alert checkbox

[WIPE]

I have a PHP page with some checkboxes.

I need to do that: When I click on a button, an alert comes out to show me all the IDs of the selected boxes. How can I do this?

Visual example:

| BUTTON| - View the selected tests in an alert.

⬜ ALL | PRODUCT | SAMPLE ID

⬜ - - - Test 1 - - SD7168

⬜ - - - Test 2 - - BH1560

⬜ - - - Test 3 - - CP4327


So I want if, for example, I selected test 1, an alert comes to me informing me the ID (SD7168) of the test I selected.

// Button 
<h4>
   <a href="" class="btn btn-info" onclick="return confirm('View selected tests')">
     <br><small>TEST ID</small></a>
</h4>

// Checkbox select all
<tr>
    <th><input type="checkbox" name="select-all" id="select-all"/>
         <label for="select-all" class='smallLabel'></label>
    </th>
</tr>

// Checkbox select single

<tr>
    <td>
       <input type="checkbox" name="<?='checkbox-'.$num?>" id="<?='checkbox-'.$num?>"/>
          <label for="<?='checkbox-'.$num?>" class='smallLabel'></label>
    </td>

// ID parameter
                    
    <td>
       <?=$test->sampleID?> Select: <input id="<?='checkbox-'.$num?>" type="checkbox"/> <br>
    </td>

// JS Checkboxes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// Listen for click on toggle checkbox
    $('#select-all').click(function(event) {   
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;                        
            });
        } else {
            $(':checkbox').each(function() {
                this.checked = false;                       
            });
        }
    }); 


// JS che I created to manage the alert

$('<?='checkbox-'.$num?>').click(function() {
    alert("Checkbox state (method 1) = " + $('<?='checkbox-'.$num?>').prop('checked'));
    alert("Checkbox state (method 2) = " + $('<?='checkbox-'.$num?>').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

[dev7060]

What is not working in the posted code?

I need to do that: When I click on a button, an alert comes out to show me all the IDs of the selected boxes. How can I do this?

Add an event listener or onclick event with the button. In the function (called by the event handler), extract the IDs of the selected checkboxes using DOM then show them using alert().

[RamananKalirajan]

Seeing your code I see you have used JQuery. You can get all the Inputs of type checkbox in an array and iterate it, see whether the checked attribute is true or false. For checked inputs, you can collect the ID's and show it in an alert window.