使用jquery与图片美化checkbox和radio控件的代码(打包下载)

效果图:
 
HTML:


代码如下:

<div id="chklist" style="padding:10px; font-size:14px; ">
<input type="checkbox" value='1' /><label>aaaaaa</label>
<input type="checkbox" value='2' /><label>bbbbbb</label>
<input type="checkbox" value='3' /><label>ccccc</label>
<input type="checkbox" value='4' /><label>ddddd</label>
</div>
<div id="radiolist" style="padding:10px; font-size:14px; ">
<input name='r' type="radio" value='11' /><label>AAAAAA</label>
<input name='r' type="radio" value='21' /><label>BBBBBBBB</label>
<input name='r' type="radio" value='31' /><label>CCCCCC</label>
<input name='r' type="radio" value='41' /><label>DDDDDD</label>
</div>

JS:


代码如下:

$(function(){
$('#chklist').hcheckbox();
$('#radiolist').hradio();
$('#btnOK').click(function(){
var checkedValues = new Array();
$('#chklist :checkbox').each(function(){
if($(this).is(':checked'))
{
checkedValues.push($(this).val());
}
});
alert(checkedValues.join(','));
alert($('#radiolist :checked').val());
})
});

引入jquery文件是必须的
还有一个是 checkbox 的插件JS文件 jquery-hcheckbox.js, 在下载的压缩包中有 源文件 和 DEMO
如果在此基础上您做出了更美的请通知我哦~~
演示地址 http://demo.jb51.net/js/jQuery_HCheckbox/index.html
打包下载地址

赞 (0)

相关推荐

  • 纯JS打造网页中checkbox和radio的美化效果

    纯JS打造网页中checkbox和radio的美化效果

    图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

  • jQuery获取Radio,CheckBox选择的Value值(示例代码)

    $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec

  • Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    //如果之前有选中的,则把选中radio取消掉$("#tj_cat .pro_category").each(function(){ if ($(this).attr('checked')){                        $(this).attr('checked' ,false);                    }});//获取被选中的标签的值radio:(checkbox和这个一样) var val=$('input:radio[name="se

  • 用RadioButten或CheckBox实现div的显示与隐藏

    当选择"女"时,显示"美女.才女":当选择"男"时,隐藏 aspx 页面内容: 复制代码 代码如下: <head runat="server"> <title>用RadioButten(或CheckBox)实现div的显示与隐藏</title> <script type="text/javascript" language="javascript"

  • input:checkbox多选框实现单选效果跟radio一样

    最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行. 废话不多说,直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

  • JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

  • android RadioButton和CheckBox组件的使用方法

    android RadioButton和CheckBox组件的使用方法

    RadioButton是单选按钮,多个RadioButton放在一个RadioGroup控件中,也就是说每次只能有1个RadioButton被选中.而CheckBox是多选按钮,Toatst是android中带的一个用于显示提示小窗口消息的控件,其提示的内容过一会儿会自动消失.RadioGroup和CheckBox控件设置监听器都是用的setOnCheckedChangeListener函数,其输入参数是一个函数,且函数内部要实现1个内部类.RadioGroup监听器的输入参数用的是RadioG

  • 使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    效果图: HTML: 复制代码 代码如下: <div id="chklist" style="padding:10px; font-size:14px; "> <input type="checkbox" value='1' /><label>aaaaaa</label> <input type="checkbox" value='2' /><label>

  • JS模拟并美化的表单控件完整实例

    JS模拟并美化的表单控件完整实例

    本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jQuery实现ajax无刷新分页页码控件

    jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • jQuery操作DOM之获取表单控件的值

    本文实例讲述了jQuery操作DOM之获取表单控件的值.分享给大家供大家参考.具体分析如下: HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了.比如,文本输人框的 value属性在DOM中的属性叫defaultValue,DOM中就没有value属性.而选项列表(select) 元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的 selected属性来取得. 由于存在这些差异,在取得和设置表单控件的值时,最好不要使用.attr()方法.而对

  • jquery 可拖拽的窗体控件实现代码

    所以要引入JQUERY框架. 把我的这个控件代码放到一个js文件里面直接引入就可以了 控件代码 复制代码 代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event

  • jquery对所有input type=text的控件赋值实现方法

    如下所示: function resetData() { $("input[type=text]").each( function() { $(this).attr("value",""); } ); } 以上这篇jquery对所有input type=text的控件赋值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Android编程实现图片放大缩小功能ZoomControls控件用法实例

    本文实例讲述了Android编程实现图片放大缩小功能ZoomControls控件用法.分享给大家供大家参考,具体如下: MainActivity代码: package example.com.myapplication; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; import

  • element-ui循环显示radio控件信息的方法

    如下所示: <el-form-item label="线路类型:" prop="isGive"> <el-radio-group v-model="currentLine.isGive"> <el-radio :label="item.id" :key="item.id" v-for="item in isGive" >{{item.name}}<

  • Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

    Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

    1. 问题/坑点 1.1 item宽高不生效问题 需要注意的是,AdapterViewFlipper 在布局时,宽高一定要用 match_parent 或者 具体dp值. 如果宽.高中使用了 wrap_content 时,会导致 AdapterViewFlipper 容器的宽高,最终变成第一个item的宽高.即使后续item的宽高超过第一个item,也不会生效,内容显示只会被限定在第一个的宽高范围内. 原理也很好理解,后续item没有绘制出来时, wrap_content 计算出来的结果,就是第

  • Android实现图片滚动和页签控件功能的实现代码

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户端.关注特效的人一定都会发现,淘宝不管是网站还是手机客户端,主页上都会有一个图片滚动播放器,上面展示一些它推荐的商品.这个几乎可以用淘宝来冠名的功能,看起来还是挺炫的,我们今天就来实现一下. 实现原理其实还是之前那篇文章Android仿人人客户端滑动菜单的侧滑菜单效果,史上最简单的侧滑实现  ,算是

随机推荐