jquery-weui自定义单选框样式

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

复选.png

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

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

选择框.png

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

这里是文档里的代码

<div class="weui-cells weui-cells_checkbox">
      <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
          <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
          <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
          <p>standard is dealt for u.</p>
        </div>
      </label>
      <label class="weui-cell weui-check__label" for="s12">
        <div class="weui-cell__hd">
          <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
          <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
          <p>standard is dealicient for u.</p>
        </div>
      </label>
      <a href="javascript:void(0);" class="weui-cell weui-cell_link">
        <div class="weui-cell__bd">添加更多</div>
      </a>
    </div>

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

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

<div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">字段名称</label>
            </div>
            <div class="weui-cell__bd">
                表单
            </div>
        </div>

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

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

原代码.png

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

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

代码改成这样

<div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">通话方式：</label>
            </div>
            <div class="weui-cell__bd">
                <div class="weui-cells  weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for="s11" >
                        <input type="checkbox" class="weui-check" name="checkbox1" id="s11"><i class="weui-icon-checked"></i>
                        <span>语音通话</span>
                    </label>
                    <label class="weui-cell weui-check__label" for="s12" >
                        <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
                        <i class="weui-icon-checked"></i>
                        <span>录音电话</span>
                    </label>
                </div>
            </div>
        </div>

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

<div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">通话方式：</label>
            </div>
            <div class="weui-cell__bd">
                <div class="weui-cells  weui-cells_radio" style="margin-top:0;">
                    <label class="weui-cell  weui-check__label" for="s11" style="display: inline-block">
                        <input type="radio" class="weui-check" name="checkbox1" id="s11"><i class="weui-icon-checked"></i>
                        <span>语音通话</span>
                    </label>
                    <label class="weui-cell weui-check__label" for="s12" style="display: inline-block">
                        <input type="radio" name="checkbox1" class="weui-check" id="s12">
                        <i class="weui-icon-checked"></i>
                        <span>录音电话</span>
                    </label>
                </div>
            </div>
        </div>

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

最终样式.png