展开全部
1、首先用hbuilder编辑器新建一个html文件，里面设置一个input框并设置它的tpye属性为checkbox，设置name属性为checkbox，同时在上方设置一个bgred的样式备用：
2、然后在下方引入Jquery库，首先获取checkbox的dom元素，给它一个点击事件，然后判断checkbox有没有被选中，如果选中就添加上一步设置好的css样式，否则则删除样式：
3、最后来到浏览器，可以看到一个checkbox框，点击将它选中：
4、点击之后checkbox的颜色就改变了：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script src="jquery在你电脑里存放的路径"></script>
<div id="checkbox">
<span>好：</span><input type="checkbox" checked="checked" value="0" > <br/>
<span>不好：</span><input type="checkbox" value="1" >
</div>
<script>
for(i=0; i<2 ;i++) //对div#checkbox下的input[checkbox]进行遍历
{
var ifchecked=$("#checkbox input").eq(i).attr("checked");
//取其checked属性值赋给变量ifchecked
if(ifchecked=="checked") $("#checkbox input").eq(i).prev().css("color","#f00");
//如果其checked属性等于"checked"，表示该checkbox被选中，则将其前一个相邻同辈元素（即span）的color改为红色
}
</script>
<div id="checkbox">
<span>好：</span><input type="checkbox" checked="checked" value="0" > <br/>
<span>不好：</span><input type="checkbox" value="1" >
</div>
<script>
for(i=0; i<2 ;i++) //对div#checkbox下的input[checkbox]进行遍历
{
var ifchecked=$("#checkbox input").eq(i).attr("checked");
//取其checked属性值赋给变量ifchecked
if(ifchecked=="checked") $("#checkbox input").eq(i).prev().css("color","#f00");
//如果其checked属性等于"checked"，表示该checkbox被选中，则将其前一个相邻同辈元素（即span）的color改为红色
}
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯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>
下面借用了你的图片来做的效果，呵呵……
<!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，你复制回去试试~
.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，你复制回去试试~
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
