返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

jquery自定义checkbox插件

2020-04-27 文章标签: jquery 插件 浏览次数:

我们继续讲解css教程,今天介绍的是自定义checkbox效果。默认的属性不美观,我们怎么按照自己的需求去修改呢

HTML5教程

我们看看效果图

checkbox插件

还有一种效果

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">北京&nbsp;&nbsp;
<input name="radio.1" value="2" type="radio" checked>上海&nbsp;&nbsp;
<input name="radio.1" value="3" type="radio">广州&nbsp;&nbsp;
 <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>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。