easyUI的radiobutton和checkbox学习总结

Basic RadioButton

http://www.jeasyui.net/demo/956.html

    
    
    
    
    
    
    


    
Basic RadioButton
    

        

            
        
        

            
        
        

            
        
    

========

Basic CheckBox

http://www.jeasyui.net/demo/944.html

    
    
    
    
    
    
    


    
Basic CheckBox
    

        

            
        
        

            
        
        

            
        
    

========

easyui radio 类型的取值和赋值方法

https://www.cnblogs.com/mr-wuxiansheng/p/6399232.html

1.HTML 文件
   
        委托人证件类型:
                    class="easyui-validatebox" checked="checked" value="身份证">身份证
                        class="easyui-validatebox" value="护照">护照
       
   
        

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选中

启用
禁用

$("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代码：
   
        是否管理员：
       
           
                否
                是
           
       
   

通过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文件

                                                    style="width: 150px;" class="easyui-textbox"
                            data-options="required:true" />
                                  委托人证件类型:
                                                    checked="checked" value="身份证">身份证
                                                    value="护照">护照
                       

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(单选框)允许用户选择一组选项中的某一项

通过标签创建单选框。

                   

                       

                           

                               
                           

                           

                               
                           

                           

                               
                           

                       

                   

                
使用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    重置选中值。