checkbox样式美化及全选反选插件

所属分类:输入-选择框,定制和风格

 9086  94  查看评论 (7)
checkbox样式美化及全选反选插件 ie兼容8

本插件实现两个功能:

1、样式美化

2、选择文字也可以选中勾选框

代码很简单,下载下来看看src就明白了。

/**
* 功能说明:复选框/单选框的全选反选以及文字点击控制的插件
* @author:vivy <lizhiziyan@qq.com>
* @time:2016-08-22 11:15:30
* @version:V1.1.0
* @js调用方法[复选框]:
* $("#id").selectCheck({
* parentSelect:"p",//支持文字也选中的标签,例子中时P标签,根据具体情况换成li,div等。不需要要控制时设为null
* allId: 'checkAll',//全选反选input的ID,如果不需要全选反选,则设置为nul
* toggleClass: 'check_span--checked',//改变的样式名,针对例子中的复选框样式美化
* checkCallBack:function(obj,bool){}//选择之后回调函数,返回obj的是否选中
* })
* @js调用方法[单选框]:
* $("#id").selectRadio({
* parentSelect:"p",//支持文字也选中的标签,例子中时P标签,根据具体情况换成li,div等。不需要要控制时设为null
* toggleClass: 'radio_span--checked'//改变的样式名,针对例子中的复选框样式美化
* })
*
*/

页面调用:

$(function() {
    //有全选且点文字可以选中
    $("#checkbox").selectCheck();
    //无全选且只能点击勾选框
    $("#checkbox1").selectCheck({
        allId: null,
        parentSelect: null
    });
    //点文字可选中
    $("#radiobox").selectRadio();
    //只能点击单选框
    $("#radiobox1").selectRadio({
        parentSelect: null
    });
});


相关插件-选择框,定制和风格

jQuery无限联动下拉框(原创)

点击之后 根据数组里有没有该对象生成下级下拉框 非常实用!ie8亲测可以用 是后台不可多得的功能!完全自己手写没有拷贝!
  选择框
 2626  24

li模拟的城市三级联动

简单易用,而且重点是不用为的样式烦恼啦,样式完全可以自定义。
  选择框
 7312  58

jQuery城市联动选择

jQuery城市三级联动选择
  选择框
 15020  137

jquery城市二级联动

jquery城市二级联动常用代码
  选择框
 84020  34

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    少年你要吃包子吗 3
    2017/1/16 13:41:31

    很好用的一个插件,但是还是有点小问题,如果同一页面有两组或多组复选框的时候,第一组全选了之后,在第二组选中任意选项后再取消此次选中,这个时候第一组的全选却被同时取消了,研究了一下,把插件中的代码做如下修改即可。

    var e = $("#" + o.allId);

    改为

    var e = d.find("#" + o.allId);
    回复
    lilizzz 0
    2016/9/14 16:09:47
    根本不需要JS
        Make Arduous Efforts0
        2016/11/8 9:11:07
        看你的一试  果然不需要js
        Make Arduous Efforts0
        2016/11/8 9:11:56
        下载过后还是需要的
    回复
    512765140 0
    2016/9/14 10:09:20
    支持一下,下载不起。 回复
    秦时明月? 0
    2016/9/14 9:09:52
    这也太贵了一个这个要2JQB
        指南针0
        2016/9/14 16:09:57
        同意
    回复
取消回复