兼容ie6的jQuery自定义checkbox和radio样式

来源:https://www.sucaihuo.com/js/3040.html 2017-09-18 21:57浏览(1235) 收藏

一款兼容ie6的jQuery自定义checkbox和radio样式,复选框为绿色的打勾,单选按钮为绿色的圆点,两者的样式可以自由调整。
兼容ie6的jQuery自定义checkbox和radio样式
分类:表单代码 > 复选框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入jQuery库、JS插件、样式文件,并对指定元素启用插件,代码如下:

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-hcheckbox.js"></script>
<link type="text/css" rel="stylesheet" href='css/css.css' />
<script type="text/javascript">
$(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());
	})
});
</script>

页面的body部分,在两个div里分别放入复选框和单选按钮的对应内容,代码如下:

<div id="chklist" style="padding:10px; font-size:14px; ">
  <input type="checkbox" value='1' />
  <label>健康</label>
  <input type="checkbox" value='2' />
  <label>快乐</label>
  <input type="checkbox" value='3' />
  <label>财富</label>
  <input type="checkbox" value='4' />
  <label>自由</label>
</div>
<div id="radiolist" style="padding:10px; font-size:14px; ">
  <input name='r' type="radio" value='11' />
  <label>健康</label>
  <input name='r' type="radio" value='21' />
  <label>快乐</label>
  <input name='r' type="radio" value='31' />
  <label>财富</label>
  <input name='r' type="radio" value='41' />
  <label>自由</label>
</div>
<input type="button" value="确定" id="btnOK" />
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2