Basic RadioButton
http://www.jeasyui.net/demo/956.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic RadioButton - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic RadioButton</h2>
<form id="ff">
<div style="margin-bottom:20px">
<input class="easyui-radiobutton" name="fruit" value="Apple" label="Apple:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-radiobutton" name="fruit" value="Orange" label="Orange:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-radiobutton" name="fruit" value="Banana" label="Banana:">
</div>
</form>
</body>
</html>
========
Basic CheckBox
http://www.jeasyui.net/demo/944.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CheckBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic CheckBox</h2>
<form id="ff">
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Apple" label="Apple:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Orange" label="Orange:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Banana" label="Banana:">
</div>
</form>
</body>
</html>
========
easyui radio 类型的取值和赋值方法
https://www.cnblogs.com/mr-wuxiansheng/p/6399232.html
1.HTML 文件
<tr id="client_check1">
<th>委托人证件类型:</th>
<td><input id="certType" type="radio" name="certType"
class="easyui-validatebox" checked="checked" value="身份证"><label>身份证</label></input>
<input id="certType" type="radio" name="certType"
class="easyui-validatebox" value="护照"><label>护照</label></input>
</td>
</tr>
2.JS的取值和赋值方法
//取值方法
function checkRadio(){
alert($("input[name='certType'][checked]").val());
}
赋值方法
//将委托人的信息进行赋值
if (data.certType == "身份证") {
$("input[name='certType'][value='身份证']").attr("checked",true);
}else if(data.certType == "护照"){
$("input[name='certType'][value='护照']").attr("checked",true);
}
radio 取值:
JS代码
$("input[name='radioName'][checked]").val();
radio 赋值, 选中值为2的radio:
JS代码
$("input[name='radioName'][value=2]").attr("checked",true);
========
easyui根据值设置Radio选中
<label class="radio-inline i-checks"><input type="radio" name="Status" value="1" /> 启用</label>
<label class="radio-inline i-checks"><input type="radio" name="Status" value="0" />禁用</label>
$("input[name='Status'][value="2"]").attr("checked", "checked").parent().addClass('checked');
========
使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
https://blog.csdn.net/javaloveiphone/article/details/49492701
easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio或复选框checkbox与文本框textbox样式不统一的问题,要保证其样式的统一性,可以通过如下代码实现:
form表单html代码:
<tr>
<td style="text-align:right;">是否管理员:</td>
<td style="text-align:left">
<span class="radioSpan">
<input type="radio" name="adminFlag" value="0">否</input>
<input type="radio" name="adminFlag" value="1">是</input>
</span>
</td>
</tr>
通过css改变radioSpan的样式:
/*新增/修改用户时,是否管理员样式保持与easyui一致*/
.radioSpan {
position: relative;
border: 1px solid #95B8E7;
background-color: #fff;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
display:block;
}
========
easyui radio 取值和赋值
http://www.cnblogs.com/mr-wuxiansheng/p/6403611.html
1.html文件
<td><input id="client" type="text" name="client"
style="width: 150px;" class="easyui-textbox"
data-options="required:true" />
委托人证件类型:
<input id="certType1" type="radio" name="certType"
checked="checked" value="身份证"><label>身份证</label></input>
<input id="certType2" type="radio" name="certType"
value="护照"><label>护照</label></input>
</td>
2.js文件
//将委托人的信息进行赋值 radio
if (detail.certType == "身份证") {
$("input[name='certType']").get(0).checked=true;
}else if(detail.certType == "护照"){
$("input[name='certType']").get(1).checked=true;
}
亲测有效。
========
EasyUI radiobutton(单选框)
http://www.jeasyui.net/plugins/763.html
使用$.fn.iRadio.defaults重写默认值对象。
Radio(单选框)允许用户选择一组选项中的某一项
通过标签创建单选框。
<div data-toggle="topjui-radio">
<form id="ff">
<div style="margin-bottom:20px">
<input data-toggle="topjui-radiobutton" name="fruit" value="Apple" label="Apple:">
</div>
<div style="margin-bottom:20px">
<input data-toggle="topjui-radiobutton" name="fruit" value="Orange" label="Orange:">
</div>
<div style="margin-bottom:20px">
<input data-toggle="topjui-radiobutton" name="fruit" value="Banana" label="Banana:">
</div>
</form>
</div>
使用Javascript创建单选框。
$('#rb').iRadiobutton({
label: 'Apple:',
value: 'Apple',
checked: true
});
属性
属性名 属性值类型 描述 默认值
width number 组件的宽度。 20
height number 组件的高度。 20
value string 组件值。 20
checked boolean 定义是否选中。 false
disabled boolean 定义是否禁用。 false
label string 组件标签。 null
labelWidth number 标签宽度。 auto
labelPosition string 标签位置。可选值:“before”、“after”,“top”。 before
labelAlign string 标签对齐。可选值:“left”、“right”。 left
事件
事件名 事件参数 描述
onChange checked 在选中值改变时触发。
方法
方法名 方法参数 描述
options none 返回属性对象。
setValue value 设置组件值。
disable none 禁用组件。
enable none 启用组件。
check index 选中组件。
uncheck none 取消选中组件。
clear none 清除选中值。
reset none 重置选中值。