jQuery Mobile - Basic Radio Widget


Radio buttons can be created using the <input> element with a type = "radio" attribute and a corresponding label. Set the input element with for attribute to match the label id so that they are semantically associated.


Following example demonstrates the use of basic radio button in the jQuery Mobile.

<!DOCTYPE html>
      <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>

         <h2>Basic Radio Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>


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

  • Save the above html code as radio_basic.html file in your server root folder.

  • Open this HTML file as http://localhost/radio_basic.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started