原创

jquery labelauty用法以及获取单选框或多选框选中的值

项目中用到了jquery labelauty单选框的样式,
如下图是官方给出的样式
file
下图是我项目中的样式,此处用到的是单选框
file

第一步,引用静态资源
下载地址 :https://github.com/fntneves/jquery-labelauty/tree/master/source

<link rel="stylesheet" href="css/jquery-labelauty.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-labelauty.js"></script>

第二步,html,当然不限制在一个ul里,可以直接拿出去使用

<ul class="dowebok">
    <li><input class="radioInput" type="radio" name="radio" data-labelauty="已选中" checked></li>
    <li><input class="radioInput" type="radio" name="radio" data-labelauty="未选中"></li>
    <li><input class="radioInput" type="radio" name="radio" data-labelauty="不可用" disabled></li>
</ul>

第三步,js

$(function(){
    $('.radioInput').labelauty();
});

这就可以形成效果了,
如下是给出的参数文档

属性/方法    类型    默认值    说明
development    布尔值    false    开发模式,将会向控制台输出一些信息
class    字符串    ‘labelauty’    触发类
label    布尔值    true    是否使用文本 label,如果为 false,则只显示图标
separator    字符串    ‘|’    文本/消息分隔符,用于选中和未选中
checked_label    字符串    ‘Checked’    默认选中时的文本
unchecked_label    字符串    ‘Unchecked’    默认未选中时的文本
minimum_width    布尔值/字符串    false    文本的最小宽度
same_width    布尔值    true

需要注意的是,这些参数是放在如下里的,例如:

$(function(){
    $('.radioInput').labelauty({
    checked_label:"选中时候显示的文本"
    });
});

第四步,获取单选框或者多选框的值,在官方文档以及百度搜索了好半天也没有找到如何获取到值,后来自己用this打印出来以后一个一个的去翻返回回来的数据,最终找到的

  $('input[name="radio"]').click(function(){
           console.log($(this))
           var value =$(this).context.nextSibling.innerText;
            // console.log(value)
        });

希望可以帮助到大家。

正文到此结束
本文目录