Question

jquery checkbox选中颜色变化

选中一个复选框之后，能否使选中的”对号“颜色变化（例如变为红色）

Answer 1

纯css不能定义checkbox的样式，不过可以借助脚本来美化它。 下面借用了你的图片来做的效果，呵呵…… *{margin:0;padding:0;} #checkbox{padding:20px;height:50px;background:#f0f0f0;} #checkbox li{margin-left:20px;float:left;list-style:none;width:40px;height:40px;background:url(

) -6px -12px no-repeat;border:none;cursor:pointer;} #checkbox li.select{background-position:-103px -12px;} #checkbox li input{border:none;display:none;} $(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); } }) })

Answer 2

<style type="text/css">
	.label_on_z1 { background:red; }
	.label_on_z2 { background:green; }
	.label_on_z3 { background:orange; }
	.label_onmouseover { background:#ccc; }
	form#faq label{display:block;line-height:25px; width:200px;}
	form#faq label input{float:right;}

</style>
<b>你对百度知道的感觉</b>
<form name="test" id="faq">
	<label for="z1">1. 知道问题好多<input type="checkbox" id="z1" name="zhidao"></label>
	<label for="z2">2. 知道回答不专业 <input type="checkbox" name="name" id="z2" name="zhidao"></label>
	<label for="z3">3. 因为百度所以知道<input type="checkbox" id="z3" name="zhidao"></label>
</form>
<script type="text/javascript">
     /*
	   需要用到jQeury的 each,toggleClass,removeClass等执行器
	   1. each 给所有的input绑定事件
	   2. toggleClass 当点击事件发生增加一个选中颜色
	   3. removeClass等执行器 当点击后不是选中，去掉颜色
	 */
	$(document).ready(function(){
		$("form#faq input").each(function(){ //1. 用each遍列所有的input	
			$(this).mouseover(function(){$(this).parent().toggleClass('label_onmouseover')})//鼠标移上去灰色背景
			$(this).mouseout(function(){$(this).parent().removeClass('label_onmouseover')})//鼠标移出去掉灰色背景
			$(this).click(function(){       //2. 判断给每个input事件click绑定方法
				if( $(this).is(':checked')){
					$(this).parent().toggleClass('label_on_'+this.id);
				}else{
					$(this).parent().removeClass('label_on_'+this.id);
					//用了toggleClass样式，没选中要同时删除
				}
				
			});
		});
	});
</script>

  需要用到jQeury的 each,toggleClass,removeClass等执行器
  1. each 给所有的input绑定事件
  2. toggleClass 当点击事件发生增加一个选中颜色
  3. removeClass等执行器 当点击后不是选中，去掉颜色

演示代码如上。

Answer 3

我现在就在做 我有代码