2016-09-16 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
关注
展开全部
<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等执行器 当点击后不是选中,去掉颜色
演示代码如上。
本回答由提问者推荐
.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等执行器 当点击后不是选中,去掉颜色
演示代码如上。
本回答由提问者推荐
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询