- 慧慧
-
1、首先用hbuilder编辑器新建一个html文件,里面设置一个input框并设置它的tpye属性为checkbox,设置name属性为checkbox,同时在上方设置一个bgred的样式备用:
2、然后在下方引入Jquery库,首先获取checkbox的dom元素,给它一个点击事件,然后判断checkbox有没有被选中,如果选中就添加上一步设置好的css样式,否则则删除样式:
3、最后来到浏览器,可以看到一个checkbox框,点击将它选中:
4、点击之后checkbox的颜色就改变了:
- coco
- Chen
-
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type="checkbox"]").click(function(){
$(":checkbox").attr("checked",false);
$(this).attr("checked",true);
$("body").css({"background":$(this).attr("value")});
});
});
</script>
<style>
.bgCol_red {
background-color:red;
}
.bgCol_blue {
background-color:blue;
}
</style>
</HEAD>
<BODY>
<form action="">
red<input type="checkbox" name="col" value="red"/>
blue<input type="checkbox" name="col" value="blue"/>
green<input type="checkbox" name="col" value="green"/>
</form>
</BODY>
</HTML>
- gitcloud
-
纯css不能定义checkbox的样式,不过可以借助脚本来美化它。
下面借用了你的图片来做的效果,呵呵……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
*
#checkbox
#checkbox li
#checkbox li.select
#checkbox li input
</style>
<script type="text/javascript">
$(function(){
$("#checkbox > li > input").removeAttr("checked");
$("#checkbox > li").click(function(){
$check=$(this).find("input:checkbox");
$(this).toggleClass("select");
if($check.attr("checked")==true){
$check.removeAttr("checked");
}else{
$(this).find("input:checkbox").attr("checked",true);
}
})
})
</script>
</head>
<body>
<ul id="checkbox">
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
</ul>
</body></html>
- 贝贝
-
<style type="text/css">
.label_on { border:2px solid red; }
</style>
<form name="test">
<input type="checkbox" name="name">
<input type="checkbox" name="name">
<input type="checkbox" name="name">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("input:checkbox").each(function(){
$(this).click(function(){
//alert($(this).attr("checked"));
$(this).toggleClass("label_on");
});
});
});
</script>
我这测试OK,你复制回去试试~
- 瑞瑞爱吃桃
-
1、首先用hbuilder编辑器新建一个html文件,里面设置一个input框并设置它的tpye属性为checkbox,设置name属性为checkbox,同时在上方设置一个bgred的样式备用:
2、然后在下方引入Jquery库,首先获取checkbox的dom元素,给它一个点击事件,然后判断checkbox有没有被选中,如果选中就添加上一步设置好的css样式,否则则删除样式:
3、最后来到浏览器,可以看到一个checkbox框,点击将它选中:
4、点击之后checkbox的颜色就改变了: