<#def title = "多选框样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/> <#def prevUrl = "button.htm"/> <#def nextUrl = "radio.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}
${zhiqim_com_ui("tutorial", "ui", "form", "checkbox")}
${zhiqim_com_breadcrumb("文库", "教程", "多选框样式")}
<#-- 标题 -->

多选框样式：

多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。

<#-- 一、纯多选框样式 -->
一、纯多选框样式（标准大小）
类型 未选中 未选中代码 已选中 未选中代码
默认 

    
    





    红色
    
    

    
    





    橙色
    
    

    
    





    黄色
    
    

    
    





    绿色
    
    

    
    





    青色
    
    

    
    





    蓝色
    
    

    
    





    紫色
    
    

    
    






<#-- 二、纯多选框样式(大号） -->

二、纯多选框样式(大号）






    类型
    未选中
    未选中代码
    已选中
    未选中代码




    默认
    
    

    
    





    红色
    
    

    
    





    橙色
    
    

    
    





    黄色
    
    

    
    





    绿色
    
    

    
    





    青色
    
    

    
    





    蓝色
    
    

    
    





    紫色
    
    

    
    






<#-- 三、纯多选框样式(加大） -->

三、纯多选框样式(加大）






    类型
    未选中
    未选中代码
    已选中
    未选中代码




    默认
    
    

    
    





    红色
    
    

    
    





    橙色
    
    

    
    





    黄色
    
    

    
    





    绿色
    
    

    
    





    青色
    
    

    
    





    蓝色
    
    

    
    





    紫色
    
    

    
    






<#-- 四、多选框样式和多选按钮联动 -->

四、多选框样式和多选按钮联动






    类型
    未选中
    未选中代码
    已选中
    未选中代码




    默认
    
    

    
    





    红色
    
    

    
    





    橙色
    
    

    
    





    黄色
    
    

    
    





    绿色
    
    

    
    





    青色
    
    

    
    





    蓝色
    
    

    
    





    紫色
    
    

    
    






<#-- 五、多选框样式和多选按钮联动和操作 -->

五、多选框样式和多选按钮联动和操作






    类型
    未选中
    未选中代码
    已选中
    未选中代码




    默认
    

    

    
    






<#-- 六、多选框全选取消 -->

六、多选框全选取消






    选择
    代码




    
        
        




        
        


        


        


        


    		
    






<#-- 七、多选框全选取消反选按钮 -->

七、多选框全选取消反选按钮






    选择
    代码




    
        
        
        
        




        
        


        


        


        


    		
    






<#-- 八、多选框在按钮中 -->

八、多选框在按钮中






    选择
    代码




    
        
    
    





${zhiqim_com_chapter()}










${zhiqim_com_footer()}