我们继续讲解css教程，今天介绍的是自定义checkbox效果。默认的属性不美观，我们怎么按照自己的需求去修改呢
我们看看效果图
还有一种效果
是不是瞬间觉得高上大，代码怎么实现呢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<link href="//freemuban.com/js/427/images/jquery.checkbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="//freemuban.com/js/427/images/jquery.safari-checkbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/images/jquery.checkbox.js"></script>
<script type="text/javascript">
$(function(){
$('input:radio').checkbox({
empty: '//freemuban.com/js/427/images/empty.png'
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>单选按钮组</h1>
<form action="" method="post" id="autotab" class="p1">
<label>你现在住在哪里？<br />
<input name="radio.1" value="1" type="radio">北京
<input name="radio.1" value="2" type="radio" checked>上海
<input name="radio.1" value="3" type="radio">广州
<input name="radio.1" value="4" type="radio">其他
</label>
</form>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<link href="//freemuban.com/js/427/images/jquery.checkbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="//freemuban.com/js/427/images/jquery.safari-checkbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/images/jquery.checkbox.js"></script>
<script type="text/javascript">
$(function(){
$('input:checkbox').checkbox({
empty: '//freemuban.com/js/427/images/empty.png',
cls:'jquery-safari-checkbox'
});
$('#check').click(function(){
jQuery('#check1').attr('disabled', jQuery('#check1').attr('disabled') ? false: true );
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>checkbox复选框</h1>
<form action="" method="post" id="autotab" class="p1">
<label>你喜欢什么？<br />
<input name="checkbox.1.1" type="checkbox" id="check" checked>玩电脑（如
<input name="checkbox.1.2" type="checkbox" id="check1">上网）
<input name="checkbox.1.3" type="checkbox" disabled>睡觉（当然不用选了）
<input name="checkbox.1.4" type="checkbox" disabled checked>运动（是人都喜欢运动）
</label>
</form>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<link href="//freemuban.com/js/427/images/jquery.checkbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="//freemuban.com/js/427/images/jquery.safari-checkbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/images/jquery.checkbox.js"></script>
<script type="text/javascript">
$(function(){
$('input:checkbox').checkbox({
empty: '//freemuban.com/js/427/images/empty.png'
});
$('#check').click(function(){
jQuery('#check1').attr('disabled', jQuery('#check1').attr('disabled') ? false: true );
});
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>checkbox复选框</h1>
<form action="" method="post" id="autotab" class="p1">
<label>你喜欢什么？<br />
<input name="checkbox.1.1" type="checkbox" id="check" checked>玩电脑（如
<input name="checkbox.1.2" type="checkbox" id="check1">上网）
<input name="checkbox.1.3" type="checkbox" disabled>睡觉（当然不用选了）
<input name="checkbox.1.4" type="checkbox" disabled checked>运动（是人都喜欢运动）
</label>
</form>
</body>
</html>
