一款兼容ie6的jQuery自定义checkbox和radio样式,复选框为绿色的打勾,单选按钮为绿色的圆点,两者的样式可以自由调整。
页面的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" />
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791