You need to use Jquery UI's documentation to design a checkbox. Then apply checkboxradio() method on the form.
- Write
labelandinputtag in theformtag. - Give id attribute in the
inputand set its value in the for attribute of the label tag to make a relation between both of them. labeltag 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