470,566 Members | 1,596 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,566 developers. It's quick & easy.

On-Screen Alert checkbox

4
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.

Expand|Select|Wrap|Line Numbers
  1. // Button 
  2. <h4>
  3.    <a href="" class="btn btn-info" onclick="return confirm('View selected tests')">
  4.      <br><small>TEST ID</small></a>
  5. </h4>
  6.  
  7. // Checkbox select all
  8. <tr>
  9.     <th><input type="checkbox" name="select-all" id="select-all"/>
  10.          <label for="select-all" class='smallLabel'></label>
  11.     </th>
  12. </tr>
  13.  
  14. // Checkbox select single
  15.  
  16. <tr>
  17.     <td>
  18.        <input type="checkbox" name="<?='checkbox-'.$num?>" id="<?='checkbox-'.$num?>"/>
  19.           <label for="<?='checkbox-'.$num?>" class='smallLabel'></label>
  20.     </td>
  21.  
  22. // ID parameter
  23.  
  24.     <td>
  25.        <?=$test->sampleID?> Select: <input id="<?='checkbox-'.$num?>" type="checkbox"/> <br>
  26.     </td>
  27.  
  28. // JS Checkboxes
  29.  
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  31.  
  32. // Listen for click on toggle checkbox
  33.     $('#select-all').click(function(event) {   
  34.         if(this.checked) {
  35.             // Iterate each checkbox
  36.             $(':checkbox').each(function() {
  37.                 this.checked = true;                        
  38.             });
  39.         } else {
  40.             $(':checkbox').each(function() {
  41.                 this.checked = false;                       
  42.             });
  43.         }
  44.     }); 
  45.  
  46.  
  47. // JS che I created to manage the alert
  48.  
  49. $('<?='checkbox-'.$num?>').click(function() {
  50.     alert("Checkbox state (method 1) = " + $('<?='checkbox-'.$num?>').prop('checked'));
  51.     alert("Checkbox state (method 2) = " + $('<?='checkbox-'.$num?>').is(':checked'));
  52. });
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  54.  
Dec 6 '21 #1
2 21284
dev7060
569 Expert 512MB
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().
Dec 15 '21 #2
RamananKalirajan
608 512MB
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.
3 Weeks Ago #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Steph | last post: by
5 posts views Thread by DotNetJunkies User | last post: by
7 posts views Thread by Ron | last post: by
1 post views Thread by Scott | last post: by
Ajay Bhalala
4 posts views Thread by Ajay Bhalala | last post: by
1 post views Thread by livre | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.