easyUI的radiobutton和checkbox学习总结

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" />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;委托人证件类型:
                        <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    重置选中值。
 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值