Radio buttons in Form

EasyUI Forum

May 11, 2024, 07:05:22 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Radio buttons in Form

Pages: [1]

« previous next »

Author

Topic: Radio buttons in Form (Read 1209 times)

poeziafree

Jr. Member

Posts: 69

Radio buttons in Form

« on: September 02, 2022, 11:42:30 PM »

Hello,

How can I achieve this type of radio buttons in form (see the attached image)?
There is a label on the left and within this label there are multiple radio buttons each having its own label.


	Logged

jarry

Administrator
Hero Member

Posts: 2264

Re: Radio buttons in Form

« Reply #1 on: September 04, 2022, 06:25:24 AM »

Please refer to the code below:

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic RadioButton - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

<body>
	<form id="ff">
		<div class="f-row" style="margin-bottom: 10px;">
			<div style="width: 100px;">Size:</div>
			<div class="f-row">
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="size" value="M" label="M" labelPosition="after"
						labelWidth="30">
				</div>
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="size" value="L" label="L" labelPosition="after"
						labelWidth="30">
				</div>
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="size" value="XL" label="XL" labelPosition="after"
						labelWidth="30">
				</div>
			</div>
		</div>
		<div class="f-row">
			<div style="width: 100px;">Color:</div>
			<div class="f-row">
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="color" value="blue" label="Blue" labelPosition="after"
						labelWidth="50">
				</div>
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="color" value="grey" label="Grey" labelPosition="after"
						labelWidth="50">
				</div>
				<div style="width: 100px;">
					<input class="easyui-radiobutton" name="color" value="XblackL" label="Black" labelPosition="after"
						labelWidth="50">
				</div>
			</div>
		</div>
	</form>
</body>

</html>


	Logged