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

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

 11222  106  查看评论 (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城市下拉选择

jQuery下拉方式选择城市,带搜索、单选、多选。
  选择框
 4813  18

一大堆的 CSS 自定义复选框

默认复选框都十分清楚和许多 web 开发人员想要至少一些能够进行自定义,但不幸的是有没有直接的方法,这样做。幸运的是我用来创建这些自定义的复选框的一群小 CSS 种解决方法。
  选择框
 67443  67

基于bootstrap的双边栏选择框

本插件实现左右选项的灵活切换,并可动态配置加载选择项
  选择框
 1776  20

jQuery下拉箭头样式 简单实用(原创)

可以任意修改 下拉箭头样式 可以自己放入任意图片来代替下拉箭头样式
  选择框
 5873  29

讨论这个项目(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
        同意
    回复
取消回复