jQuery Mobile - Checkbox Basic markup

Description

Checkbox can be created by using the <input> element with a type = "checkbox" attribute and a corresponding label. Include the input element inside the label element so that they are semantically associated.

Example

Following example demonstrates the use of basic checkbox in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page">
         <form>
            <label>
               <input type = "checkbox">CheckBox 1
            </label>
            
            <label>
               <input type = "checkbox">CheckBox 2
            </label>
            
            <label>
               <input type = "checkbox">CheckBox 3
            </label>
         </form>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as checkbox_basic.html file in your server root folder.
Open this HTML file as http://localhost/checkbox_basic.html and the following output will be displayed.

jquery_mobile_widgets.htm