Check which check box is checked in simple jquery with html form

This is very easy example to find out which check box is checked.

You can copy and paste it for test.

Careful You need to internet connection for test that. Because “jquery-1.7.min.js” file browse from internet.

Rajib Kumar Rakhmit

Web Developler

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>CheckBox Check in Jquery</title>
  6. </head>
  7.  
  8. <body>
  9. <script src=“http://code.jquery.com/jquery-1.7.min.js” type=“text/javascript”></script>
  10. <div style=display: block; width: 780px; id=“message_inbox” class=“page-mid”>
  11.     <div style=margin-top:10px;>
  12.     <input type=“button” title=“Delete selected emails [Delete]“ value=“Delete” id=“delete” name=“”>
  13.     <input type=“button” title=“Reply to sender” value=“Reply” id=“reply_sender” name=“”>
  14.     <input type=“button” title=“Reply to all” value=“Reply All” id=“reply_all” name=“”>
  15.     <input type=“button” title=“Forward this mail” value=“Forward” id=“forward” name=“”>
  16.     </div>
  17. <form id=“messageBox”>
  18.     <table width=“100%” cellspacing=“4″ cellpadding=“3″ style=margin-top:10px;>
  19.         <thead>
  20.         <tr bgcolor=“#E7E7E7″>
  21.             <td align=“center”><input type=“checkbox” value=“check_all_message” id=“check_all_message” name=“check_all_message”></td>
  22.             <td>From</td>
  23.             <td>Subject</td>
  24.             <td>Date</td>
  25.             <td align=“center”><img src=“images/attach.png”></td>
  26.             <td align=“center”><img src=“images/star.png”></td>
  27.         </tr>
  28.         </thead>
  29.         <tbody>
  30.                 
  31.         <tr id=“2″>
  32.             <td align=“center”><input type=“checkbox” value=“2″ id=“check_message” name=“check_message”></td>
  33.             <td>
  34.                                         <a id=“link” class=“2″ href=“message_read”>
  35.                             Froogo                        </a>
  36.                                     </td>
  37.             <td>No reply :: Delivery Notice From Frooogo</td>
  38.             <td>Oct 20, 2011</td>
  39.             <td></td>
  40.             <td></td>
  41.         </tr>
  42.                 
  43.         <tr id=“3″>
  44.             <td align=“center”><input type=“checkbox” value=“3″ id=“check_message” name=“check_message”></td>
  45.             <td>
  46.                                         <a id=“link” class=“3″ href=“message_read”>
  47.                             rajib kumar                        </a>
  48.                                     </td>
  49.             <td>reply mail</td>
  50.             <td>Oct 20, 2011</td>
  51.             <td></td>
  52.             <td></td>
  53.         </tr>
  54.                 
  55.         <tr id=“4″>
  56.             <td align=“center”><input type=“checkbox” value=“4″ id=“check_message” name=“check_message”></td>
  57.             <td>
  58.                                         <a id=“link” class=“4″ href=“message_read”>
  59.                             Mehedi Hasan                        </a>
  60.                                     </td>
  61.             <td>baba</td>
  62.             <td>Oct 20, 2011</td>
  63.             <td></td>
  64.             <td></td>
  65.         </tr>
  66.                 </tbody>
  67.     </table>
  68. </form>
  69. <script>
  70. jQuery(“#delete”).live(“click”,function(){
  71.     var chkMail=“”;
  72.     $(“#messageBox #check_message”).each(function(i){
  73.                 if($(this).attr(“checked”)){
  74.                     chkMail += “>”+$(this).attr(“value”);
  75.                 }
  76.                 
  77.     });
  78.     var answer = confirm(“Confirm to delete?”)
  79.     if (answer){
  80.         alert(“The selected values are: ”+chkMail);
  81.     }
  82.     else{
  83.         alert(“Thanks for sticking around!”)
  84.     }                        
  85. });
  86. </script>
  87.  
  88. </div>
  89. </body>
  90. </html>

Leave a Reply