lundi 6 décembre 2021

On-Screen Alert checkbox

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>




Aucun commentaire:

Enregistrer un commentaire