单选框

单选框组件是对 <input type="radio"> 元素的美化替代。

普通单选框

  <div class="layui-form">
  <input type="radio" name="AAA" value="1" title="默认">
  <input type="radio" name="AAA" value="2" title="选中" checked> 
  <input type="radio" name="AAA" value="3" title="禁用" disabled> 
</div>
<!-- import layui -->
  

• 属性 title 可设置单选框标题
• 属性 checked 可设置默认选中
• 属性 disabled 可设置禁用状态
• 属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）。同组单选框一般设置相同值。
• 属性 lay-skin 可设置单选框风格，可选值：none(无样式)^2.9.8+ 默认风格可不填

自定义标题模板

在 radio 元素后的相邻元素设置特定属性 lay-radio，可以与 radio 标题进行绑定。

  <div class="layui-form">
  <input type="radio" name="AAA" value="0" title="默认">
  <div lay-radio>
    <span style="color: blue;">自定义模板 ♂</span>
  </div>
  <input type="radio" name="AAA" value="1" title="默认">
  <div lay-radio>
    <span style="color: pink;">自定义模板 ♀</span>
  </div>
</div>
<!-- import layui -->
  

自定义任意风格 ^2.9.8+

通过对 radio 元素设置 lay-skin="none" 属性禁用默认样式，从而实现任意风格的单选组件。
注： 这意味着你需要掌握一定的 CSS 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。

  <!--
 以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
-->
<div class="layui-form" lay-filter="form-demo-skin">
  <style>
  /*
   * 基于复选框和单选框的卡片风格多选组件
   * 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
   */
  /* 主体 */
  .layui-form-checkbox>.lay-skin-checkcard,
  .layui-form-radio>.lay-skin-checkcard {
    display: table;
    display: flex;
    padding: 12px;
    white-space: normal;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    color: #000;
    background-color: #fff;
  }
  .layui-form-checkbox>.lay-skin-checkcard>*,
  .layui-form-radio>.lay-skin-checkcard>* {
    /* display: table-cell; */  /* IE */
    vertical-align: top;
  }
  /* 悬停 */
  .layui-form-checkbox:hover>.lay-skin-checkcard,
  .layui-form-radio:hover>.lay-skin-checkcard {
    border-color: #16b777;
  }
  /* 选中 */
  .layui-form-checked>.lay-skin-checkcard,
  .layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
    color: #000;
    border-color: #16b777;
    background-color: rgb(22 183 119 / 10%) !important;
    /* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
  }
  /* 禁用 */
  .layui-checkbox-disabled>.lay-skin-checkcard,
  .layui-radio-disabled>.lay-skin-checkcard {
    box-shadow: none;
    border-color: #e5e5e5 !important;
    background-color: #eee !important;
  }
  /* card 布局 */
  .lay-skin-checkcard-avatar {
    padding-right: 8px;
  }
  .lay-skin-checkcard-detail {
    overflow: hidden;
    width: 100%;
  }
  .lay-skin-checkcard-header {
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    margin-bottom: 4px;
  }
  .lay-skin-checkcard-description {
    font-size: 13px;
    color: #5f5f5f;
  }
  .layui-disabled  .lay-skin-checkcard-description{
    color: #c2c2c2! important;
  }
  /* 选中 dot */
  .layui-form-checked>.lay-check-dot:after,
  .layui-form-radioed>.lay-check-dot:after {
    position: absolute;
    content: "";
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-width: 10px;
    border-style: dashed;
    border-color: transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 6px;
    border-top-color: #16b777;
    border-top-style: solid;
    border-right-color: #16b777;
    border-right-style: solid;
    overflow: hidden;
  }
  .layui-checkbox-disabled>.lay-check-dot:after,
  .layui-radio-disabled>.lay-check-dot:after {
    border-top-color: #d2d2d2;
    border-right-color: #d2d2d2;
  }
  /* 选中 dot-2 */
  .layui-form-checked>.lay-check-dot-2:before,
  .layui-form-radioed>.lay-check-dot-2:before {
    position: absolute;
    font-family: "layui-icon";
    content: "\e605";
    color: #fff;
    bottom: 4px;
    right: 3px;
    font-size: 9px;
    z-index: 12;
  }
  .layui-form-checked>.lay-check-dot-2:after,
  .layui-form-radioed>.lay-check-dot-2:after {
    position: absolute;
    content: "";
    bottom: 2px;
    right: 2px;
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-width: 10px;
    border-style: dashed;
    border-color: transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-right-color: #16b777;
    border-right-style: solid;
    border-bottom-color: #16b777;
    border-bottom-style: solid;
    overflow: hidden;
  }
  .layui-checkbox-disabled>.lay-check-dot-2:before,
  .layui-radio-disabled>.lay-check-dot-2:before {
    color: #eee !important;
  }
  .layui-checkbox-disabled>.lay-check-dot-2:after,
  .layui-radio-disabled>.lay-check-dot-2:after {
    border-bottom-color: #d2d2d2;
    border-right-color: #d2d2d2;
  }
  .lay-ellipsis-multi-line {
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
</style>
<!-- 标签风格 -->
<style>
  .layui-form-radio>.lay-skin-tag,
  .layui-form-checkbox>.lay-skin-tag {
    font-size: 13px;
    border-radius: 100px;
  }
  .layui-form-checked>.lay-skin-tag,
  .layui-form-radioed>.lay-skin-tag {
    color: #fff !important;
    background-color: #16b777 !important;
  }
</style>
<!-- 单选框 Color Picker -->
<style>
  /* 主体 */
  .layui-form-radio>.lay-skin-color-picker {
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    width: 20px;
    height: 20px;
  }
  /* 选中 */
  .layui-form-radioed>.lay-skin-color-picker {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
  }
</style>

  <h3 class="ws-bold">自定义“卡片风格”的单选组件</h3>
  <div class="layui-row layui-col-space8">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
      <input type="radio" name="radio1" value="chrome" lay-skin="none">
      <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
        <div class="lay-skin-checkcard-avatar">
          <span class="layui-icon layui-icon-chrome" style="font-size: 30px"></span>
        </div>
        <div class="lay-skin-checkcard-detail">
          <div class="lay-skin-checkcard-header">Chrome</div>
          <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
            由 Google 公司开发的网页浏览器，被大多数人所使用。
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
      <input type="radio" name="radio1" value="edge" lay-skin="none" checked>
      <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
        <div class="lay-skin-checkcard-avatar">
          <i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
        </div>
        <div class="lay-skin-checkcard-detail">
          <div class="lay-skin-checkcard-header">Edge</div>
          <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
            由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
      <input type="radio" name="radio11" value="firefox" lay-skin="none" disabled>
      <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
        <div class="lay-skin-checkcard-avatar">
          <i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
        </div>
        <div class="lay-skin-checkcard-detail">
          <div class="lay-skin-checkcard-header">Firefox</div>
          <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
            由 Mozilla 开发的开放源代码的网页浏览器。
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
      <input type="radio" name="radio11" value="ie" lay-skin="none" disabled checked>
      <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
        <div class="lay-skin-checkcard-avatar">
          <i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
        </div>
        <div class="lay-skin-checkcard-detail">
          <div class="lay-skin-checkcard-header">Internet Explorer</div>
          <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
            由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
          </div>
        </div>
      </div>
    </div>
  </div>
  <h3 class="ws-bold">自定义“标签风格”的单选组件</h3>
  <div>
    <input type="radio" name="hobby" value="唱" lay-skin="none" checked>
    <div lay-radio class="lay-skin-tag layui-badge">唱</div>
    <input type="radio" name="hobby" value="跳" lay-skin="none">
    <div lay-radio class="lay-skin-tag layui-badge">跳</div>
    <input type="radio" name="hobby" value="rap" lay-skin="none">
    <div lay-radio class="lay-skin-tag layui-badge">rap</div>
    <input type="radio" name="hobby" value="篮球" lay-skin="none">
    <div lay-radio class="lay-skin-tag layui-badge">篮球</div>
  </div>
  <h3 class="ws-bold">自定义“颜色选择”的单选组件</h3>
  <div>
    <input type="radio" name="color" value="red" lay-skin="none">
    <div lay-radio class="lay-skin-color-picker" style="color: red; background-color: red"></div>
    <input type="radio" name="color" value="#16b777" lay-skin="none">
    <div lay-radio class="lay-skin-color-picker" style="color: #16b777; background-color: #16b777"></div>
    <input type="radio" name="color" value="blueviolet" lay-skin="none">
    <div lay-radio class="lay-skin-color-picker" style="color: blueviolet; background-color: blueviolet"></div>
    <input type="radio" name="color" value="#16baaa" lay-skin="none">
    <div lay-radio class="lay-skin-color-picker" style="color: #16baaa; background-color: #16baaa"></div>
  </div>
  <hr>
  <p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
</div>
<!-- import layui -->
<script>
  layui.use(function () {
    var form = layui.form;
    var $ = layui.$;
    // …
  });
</script>

  

单选框事件

form.on('radio(filter)', callback);

• radio 为单选框事件固定名称
• filter 为单选框元素对应的 lay-filter 属性值

该事件在单选框被点击或选中时触发。

  <div class="layui-form">
  <div class="layui-form-item">
    <input type="radio" name="AAA" value="1" title="选项1" lay-filter="demo-radio-filter" checked>
    <input type="radio" name="AAA" value="2" lay-filter="demo-radio-filter" title="选项2"> 
    <input type="radio" name="AAA" value="3" lay-filter="demo-radio-filter" title="选项3"> 
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo-radio-submit">确认</button>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // radio 事件
  form.on('radio(demo-radio-filter)', function(data){
    var elem = data.elem; // 获得 radio 原始 DOM 对象
    var checked = elem.checked; // 获得 radio 选中状态
    var value = elem.value; // 获得 radio 值
    var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
    
    layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
  });
  // 通过表单提交事件，演示 radio 不同状态下的字段结果
  form.on('submit(demo-radio-submit)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>