Radio Button/input Designing in Jquery UI

Date Published: 06/05/2020Published By: JaiSchool

You need to use Jquery UI's documentation to design a checkbox. Then apply checkboxradio() method on the form.

  • Write label and input tag in the form tag.
  • Give id attribute in the input and set its value in the for attribute of the label tag to make a relation between both of them.
  • label tag will have text content to display in the radio button.

Example***

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Radio Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>
<form id="radio-form">
  <label for="radio1">Male</label>
  <input type="radio" name="gender" value="male" id="radio1" />

  <label for="radio2">Female</label>
  <input type="radio" name="gender" value="female" id="radio2" /><br><br>
  <input type="submit" value="Submit" />
</form>
<script>
  $(document).ready(function(){
    $("#radio-form input").checkboxradio();
  });
</script>
</body>
</html>

Publish A Comment

Leave a Reply

Your email address will not be published.