jquery 实现checkbox选中颜色改变

我是新手希望看到完整的小例子... 我是新手希望看到完整的小例子展开

 我来答

5个回答

#热议# 普通体检能查出癌症吗？

飞喵某

高粉答主

2019-06-21 · 说的都是干货，快来关注

知道答主

回答量：631

采纳率：0%

帮助的人：29.4万

我也去答题访问个人页

关注

展开全部

1、首先用hbuilder编辑器新建一个html文件，里面设置一个input框并设置它的tpye属性为checkbox，设置name属性为checkbox，同时在上方设置一个bgred的样式备用：

2、然后在下方引入Jquery库，首先获取checkbox的dom元素，给它一个点击事件，然后判断checkbox有没有被选中，如果选中就添加上一步设置好的css样式，否则则删除样式：

3、最后来到浏览器，可以看到一个checkbox框，点击将它选中：

4、点击之后checkbox的颜色就改变了：

已赞过 已踩过<

评论收起

魔力设

广告2024-12-16

魔力设免费ps怎么抠图，智能识别，3秒完成!可识别人像，物体，轻松去除背景，证件照换底，调节尺寸，无需下载软件，简单好用，在线抠图神器!

www.molishe.com

指罗男
推荐于2017-11-25 · 超过30用户采纳过TA的回答

知道答主

回答量：124

采纳率：0%

帮助的人：89.6万

我也去答题访问个人页

关注

展开全部

<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>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

842390400
2011-09-05 · 超过19用户采纳过TA的回答

知道答主

回答量：81

采纳率：0%

帮助的人：69.1万

我也去答题访问个人页

关注

展开全部

<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>

已赞过 已踩过<

评论收起

邴寄阳
2011-09-05 · TA获得超过277个赞

知道答主

回答量：454

采纳率：0%

帮助的人：284万

我也去答题访问个人页

关注

展开全部

纯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>

已赞过 已踩过<

评论收起

naruco
推荐于2016-06-30 · TA获得超过639个赞

知道小有建树答主

回答量：807

采纳率：50%

帮助的人：535万

我也去答题访问个人页

关注

展开全部

<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，你复制回去试试~


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起