Check Box Using JQuery

Interview, Web Technology / HTML, jQuery, Web Technology

Question:

Create a page in a file named jqcheckbox.html where in to check whether check box is selected or checked. Indicate the number of check boxes checked.

Use a <div> tag with id as “result” to display the output.

Jquery Library – https://code.jquery.com/jquery-1.10.2.js

Sample of the page before checked

Quiz for Exam - Check Box Using JQuery

Sample of the page after checked

Quiz for Exam - Check Box Using JQuery

Code:

jqcheckbox.html

<html>
   <head>
       <script src="https://code.jquery.com/jquery-1.10.2.js">
       </script>
       <script>
           $(document).ready(function(){
               var $checkboxes=$('#a td input[type="checkbox"]');
               $checkboxes.change(function(){
                  var ccc=$checkboxes.filter(':checked').lenght;
                  $('span').text(ccc);
               });
           });
       </script>
   </head>
   <body>
       <form id="a">
           <table>
               <tr>
                   <td><input type="checkbox" name="color" value="Red">Red</td>
                   <td><input type="checkbox" name="color" value="Green">Green</td>
                   <td><input type="checkbox" name="color" value="Blue">Blue</td>
                   <td><input type="checkbox" name="color" value="Black">Black</td>
               </tr>
           </table>
       </form>
       <div id="result"><span>0</span> are checked </div>
   </body>
</html>

Recommended:

Leave a Comment Cancel Reply