2019-12-27

jquery-weui自定义单选框样式

jquery-weui官方文档 表单里面的单选样式跟常规的单选样式不一样，常规的单选项都是位于一行，

复选.png

在选项前面添加勾选圆圈，需要我们自定义样式。怎么自定义呢，自己从0开始重新写吗？哦，没问题，

那可能有点浪费时间，还要考虑兼容性等其它问题。既然我们用的是jquery-weui ui样式，那就在此基础上进行改造，简单又高效。

选择框.png

接下来的问题是根据哪个样式改造呢？我们发现复选列表项的样式跟目标样式比较接近，那我们就在它的样式基础上改造。

这里是文档里的代码

      
        

          
          
        
        

          
standard is dealt for u.
        
      
      
        

          
          
        
        

          
standard is dealicient for u.
        
      
      
        
添加更多
      
    

首先删除不需要的a标签，然后想办法让两个选项位于同一行。

jquery-weui表单的html结构通常是这样的：

            

                字段名称
            
            

                表单
            
        

我们只要往里面填充内容就可以了，字段名输入自己的字段名，剩下的主要是表单。

我们找出原代码里 的复选框样式，放进去就ok了。

原代码.png

这一步最关键的就是不要漏掉跟复选框相关的类，其它布局方面像weui-cells weui-cell可以选择性忽略。

因为要放在一行，把包裹input、i、p的div去掉，p标签会换行，把p换成span。

代码改成这样

            

                通话方式：
            
            

                

                    
                        
                        语音通话
                    
                    
                        
                        
                        录音电话
                    
                
            
        

还有最后一步，因为我们需要的是单选框，要把相应的类名改成radio，type="checkbox" 改成radio, 最后的代码：

            

                通话方式：
            
            

                

                    
                        
                        语音通话
                    
                    
                        
                        
                        录音电话
                    
                
            
        

注意：style里的样式是为了兼容ios, 原来的样式在ios上测试点击效果十分不稳定，后来在同事的帮助下加了style样式，ios终于正常了
最后的效果：

最终样式.png