<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="mousePoint"> </div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<div style="font-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:135px 0 0 45px; " >
<input id="s1" name="q" type="radio" value="m" onclick="onClickColor(this);"/>
<label for="s1" value="男" style="padding:0 60px 0 0;font-size:30px" > 男</label>
<input id="s2" name="q" type="radio" value="f" onclick="onClickColor(this);"/>
<label for="s2" value="女" style="font-size:30px; padding:0 50px 0 0" > 女</label>
</div>
<div align="left" style="padding:65px 0 0 45px;" >
<input name="question" id="s3" type="radio" value="s"/>
<label for="s3" value="学生" style="sursor: pointer;font-size:30px; padding:0 30px 0 0" > 学生</label>
<input name="question" id="s4" type="radio" value="o"/>
<label for="s4" value="上班族" style="sursor: pointer; font-size:30px; padding:0 15px 0 0" > 上班族</label>
<input name="question" id="s5" type="radio" value="p"/>
<label for="s5" value="自由职业者" style="sursor: pointer; font-size:30px;" > 自由职业者</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input name="question" id="d1" type="checkbox" value="1" onClick="chaCloor(this)"/>
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" onClick="chaCloor(this)"/>
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" onClick="chaCloor(this)"/>
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input id="s6" name="q" type="radio" value="y" />
<label for="s6" value="是" style="padding:0 60px 0 0;font-size:30px"> 是</label>
<input id="s7" name="q" type="radio" value="n"/>
<label for="s7" value="否" style="font-size:30px; padding:0 50px 0 0"> 否</label>
</div>
</div>
<div style="-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:150px 0 0 45px;">
<input name="question" id="d6" type="checkbox" value="1"/>
<label for="d6" value="蒙牛" style="sursor: pointer; font-size:30px; padding:0 30px 0 0"> 蒙牛</label>
<input name="question" id="d7" type="checkbox" value="2" />
<label for="d7" value="伊利" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 伊利</label>
<input name="question" id="d8" type="checkbox" value="3" />
<label for="d8" value="卫岗" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 卫岗</label>
<input name="question" id="d9" type="checkbox" value="4" />
<label for="d9" value="光明" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 光明</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input id="s8" name="q" type="radio" value="y"/>
<label for="s8" value="是" style="font-size:30px;padding:0 60px 0 0;"> 是</label>
<input id="s9" name="q" type="radio" value="n" />
<label for="s9" value="否" style="font-size:30px"> 否</label>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input name="question" id="d10" type="checkbox" value="1" />
<label for="d10" value="广告" style="sursor: pointer; font-size:30px;padding:0 30px 0 0">广告 </label>
<input name="question" id="d11" type="checkbox" value="2"/>
<label for="d11" value="实惠" style="sursor: pointer; font-size:30px;padding:0 20px 0 0"> 实惠</label>
<input name="question" id="d12" type="checkbox" value="3"/>
<label for="d12" value="富有年轻时尚感" style="sursor: pointer; font-size:30px; padding:0 15px 0 0">富有年轻时尚感 </label>
</div>
<div align="left" style="padding:55px 0 0 45px">
<input name="question" id="s10" type="radio" value="1" />
<label for="s10" value="餐前" style="sursor: pointer; font-size:30px; padding:0 30px 0 0">餐前 </label>
<input name="question" id="s11" type="radio" value="2"/>
<label for="s11" value="餐后" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 餐后</label>
<input name="question" id="s12" type="radio" value="3" />
<label for="s12" value="睡前" style="sursor: pointer; font-size:30px; padding:0 15px 0 0"> 睡前</label>
</div>
</div>
</div>
</div>
</div>
<div id="pager">
<div> </div>
</div>
</body>
</html>能点单选多选后面的字变色，应该是分两个方法判断变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="mousePoint"> </div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<div style="font-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:135px 0 0 45px; " >
<input id="s1" name="q" type="radio" value="m" onclick="onClickColor(this);"/>
<label for="s1" value="男" style="padding:0 60px 0 0;font-size:30px" > 男</label>
<input id="s2" name="q" type="radio" value="f" onclick="onClickColor(this);"/>
<label for="s2" value="女" style="font-size:30px; padding:0 50px 0 0" > 女</label>
</div>
<div align="left" style="padding:65px 0 0 45px;" >
<input name="question" id="s3" type="radio" value="s"/>
<label for="s3" value="学生" style="sursor: pointer;font-size:30px; padding:0 30px 0 0" > 学生</label>
<input name="question" id="s4" type="radio" value="o"/>
<label for="s4" value="上班族" style="sursor: pointer; font-size:30px; padding:0 15px 0 0" > 上班族</label>
<input name="question" id="s5" type="radio" value="p"/>
<label for="s5" value="自由职业者" style="sursor: pointer; font-size:30px;" > 自由职业者</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input name="question" id="d1" type="checkbox" value="1" onClick="chaCloor(this)"/>
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" onClick="chaCloor(this)"/>
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" onClick="chaCloor(this)"/>
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input id="s6" name="q" type="radio" value="y" />
<label for="s6" value="是" style="padding:0 60px 0 0;font-size:30px"> 是</label>
<input id="s7" name="q" type="radio" value="n"/>
<label for="s7" value="否" style="font-size:30px; padding:0 50px 0 0"> 否</label>
</div>
</div>
<div style="-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:150px 0 0 45px;">
<input name="question" id="d6" type="checkbox" value="1"/>
<label for="d6" value="蒙牛" style="sursor: pointer; font-size:30px; padding:0 30px 0 0"> 蒙牛</label>
<input name="question" id="d7" type="checkbox" value="2" />
<label for="d7" value="伊利" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 伊利</label>
<input name="question" id="d8" type="checkbox" value="3" />
<label for="d8" value="卫岗" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 卫岗</label>
<input name="question" id="d9" type="checkbox" value="4" />
<label for="d9" value="光明" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 光明</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input id="s8" name="q" type="radio" value="y"/>
<label for="s8" value="是" style="font-size:30px;padding:0 60px 0 0;"> 是</label>
<input id="s9" name="q" type="radio" value="n" />
<label for="s9" value="否" style="font-size:30px"> 否</label>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input name="question" id="d10" type="checkbox" value="1" />
<label for="d10" value="广告" style="sursor: pointer; font-size:30px;padding:0 30px 0 0">广告 </label>
<input name="question" id="d11" type="checkbox" value="2"/>
<label for="d11" value="实惠" style="sursor: pointer; font-size:30px;padding:0 20px 0 0"> 实惠</label>
<input name="question" id="d12" type="checkbox" value="3"/>
<label for="d12" value="富有年轻时尚感" style="sursor: pointer; font-size:30px; padding:0 15px 0 0">富有年轻时尚感 </label>
</div>
<div align="left" style="padding:55px 0 0 45px">
<input name="question" id="s10" type="radio" value="1" />
<label for="s10" value="餐前" style="sursor: pointer; font-size:30px; padding:0 30px 0 0">餐前 </label>
<input name="question" id="s11" type="radio" value="2"/>
<label for="s11" value="餐后" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 餐后</label>
<input name="question" id="s12" type="radio" value="3" />
<label for="s12" value="睡前" style="sursor: pointer; font-size:30px; padding:0 15px 0 0"> 睡前</label>
</div>
</div>
</div>
</div>
</div>
<div id="pager">
<div> </div>
</div>
</body>
</html>能点单选多选后面的字变色，应该是分两个方法判断变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="mousePoint"> </div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<script>
function nextSibling(o) {
while (o = o.nextSibling)if (o.nodeType == 1) return o;
return false;
}
function onClickColor(o) {
if (o.type == 'radio') {//为单选设置标签为默认的颜色
var lbs = o.parentNode.getElementsByTagName('label');
for (var i = 0; i < lbs.length; i++) lbs[i].style.color ='inherit';
}
nextSibling(o).style.color = o.checked ? 'red' : 'inherit';//设置标签为红色
}
</script>
<div style="font-family:'Adobe 黑体 Std R';">
<div align="left" style="padding:135px 0 0 45px; " >
<input id="s1" name="q" type="radio" value="m" onclick="onClickColor(this);"/>
<label for="s1" value="男" style="padding:0 60px 0 0;font-size:30px" > 男</label>
<input id="s2" name="q" type="radio" value="f" onclick="onClickColor(this);"/>
<label for="s2" value="女" style="font-size:30px; padding:0 50px 0 0" > 女</label>
</div>
<div align="left" style="padding:65px 0 0 45px;" >
<input name="question" id="s3" type="radio" value="s"/>
<label for="s3" value="学生" style="sursor: pointer;font-size:30px; padding:0 30px 0 0" > 学生</label>
<input name="question" id="s4" type="radio" value="o"/>
<label for="s4" value="上班族" style="sursor: pointer; font-size:30px; padding:0 15px 0 0" > 上班族</label>
<input name="question" id="s5" type="radio" value="p"/>
<label for="s5" value="自由职业者" style="sursor: pointer; font-size:30px;" > 自由职业者</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input name="question" id="d1" type="checkbox" value="1" onClick="onClickColor(this)"/>
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" onClick="onClickColor(this)"/>
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" onClick="onClickColor(this)"/>
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input id="s6" name="q" type="radio" value="y" />
<label for="s6" value="是" style="padding:0 60px 0 0;font-size:30px"> 是</label>
<input id="s7" name="q" type="radio" value="n"/>
<label for="s7" value="否" style="font-size:30px; padding:0 50px 0 0"> 否</label>
</div>
</div>
<div style="-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:150px 0 0 45px;">
<input name="question" id="d6" type="checkbox" value="1"/>
<label for="d6" value="蒙牛" style="sursor: pointer; font-size:30px; padding:0 30px 0 0"> 蒙牛</label>
<input name="question" id="d7" type="checkbox" value="2" />
<label for="d7" value="伊利" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 伊利</label>
<input name="question" id="d8" type="checkbox" value="3" />
<label for="d8" value="卫岗" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 卫岗</label>
<input name="question" id="d9" type="checkbox" value="4" />
<label for="d9" value="光明" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 光明</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input id="s8" name="q" type="radio" value="y"/>
<label for="s8" value="是" style="font-size:30px;padding:0 60px 0 0;"> 是</label>
<input id="s9" name="q" type="radio" value="n" />
<label for="s9" value="否" style="font-size:30px"> 否</label>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input name="question" id="d10" type="checkbox" value="1" />
<label for="d10" value="广告" style="sursor: pointer; font-size:30px;padding:0 30px 0 0">广告 </label>
<input name="question" id="d11" type="checkbox" value="2"/>
<label for="d11" value="实惠" style="sursor: pointer; font-size:30px;padding:0 20px 0 0"> 实惠</label>
<input name="question" id="d12" type="checkbox" value="3"/>
<label for="d12" value="富有年轻时尚感" style="sursor: pointer; font-size:30px; padding:0 15px 0 0">富有年轻时尚感 </label>
</div>
<div align="left" style="padding:55px 0 0 45px">
<input name="question" id="s10" type="radio" value="1" />
<label for="s10" value="餐前" style="sursor: pointer; font-size:30px; padding:0 30px 0 0">餐前 </label>
<input name="question" id="s11" type="radio" value="2"/>
<label for="s11" value="餐后" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 餐后</label>
<input name="question" id="s12" type="radio" value="3" />
<label for="s12" value="睡前" style="sursor: pointer; font-size:30px; padding:0 15px 0 0"> 睡前</label>
</div>
</div>
</div>
</div>
</div>
<div id="pager">
<div></div>
</div>
</body>
</html>
<input name="question" id="d1" type="checkbox" value="1" onClick="onClickColor(this)"/>
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" onClick="onClickColor(this)"/>
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" onClick="onClickColor(this)"/>
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>这段代码还是有点问题点不中，其他我都测试过了
<div class="slidePageContent bgcolor2" style="background-image:url(img/2.jpg);>
能判断div class="slidePageContent bgcolor3 或者4,5 选中的颜色不同吗？有些背景颜色比较红，选了看不清了，如果不行的话，我就选个中性的颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.uncheck{
color:#CCC;
}
.checked{
color:#000;
}
</style>
</head>
<body>
<div id="mousePoint"> </div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<div style="font-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:135px 0 0 45px; " >
<input id="s1" name="q" type="radio" value="m" />
<label for="s1" value="男" style="padding:0 60px 0 0;font-size:30px" > 男</label>
<input id="s2" name="q" type="radio" value="f" />
<label for="s2" value="女" style="font-size:30px; padding:0 50px 0 0" > 女</label>
</div>
<div align="left" style="padding:65px 0 0 45px;" >
<input name="question" id="s3" type="radio" value="s"/>
<label for="s3" value="学生" style="sursor: pointer;font-size:30px; padding:0 30px 0 0" > 学生</label>
<input name="question" id="s4" type="radio" value="o"/>
<label for="s4" value="上班族" style="sursor: pointer; font-size:30px; padding:0 15px 0 0" > 上班族</label>
<input name="question" id="s5" type="radio" value="p"/>
<label for="s5" value="自由职业者" style="sursor: pointer; font-size:30px;" > 自由职业者</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input name="question" id="d1" type="checkbox" value="1" />
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" />
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" />
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input id="s6" name="q" type="radio" value="y" />
<label for="s6" value="是" style="padding:0 60px 0 0;font-size:30px"> 是</label>
<input id="s7" name="q" type="radio" value="n"/>
<label for="s7" value="否" style="font-size:30px; padding:0 50px 0 0"> 否</label>
</div>
</div>
<div style="-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:150px 0 0 45px;">
<input name="question" id="d6" type="checkbox" value="1"/>
<label for="d6" value="蒙牛" style="sursor: pointer; font-size:30px; padding:0 30px 0 0"> 蒙牛</label>
<input name="question" id="d7" type="checkbox" value="2" />
<label for="d7" value="伊利" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 伊利</label>
<input name="question" id="d8" type="checkbox" value="3" />
<label for="d8" value="卫岗" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 卫岗</label>
<input name="question" id="d9" type="checkbox" value="4" />
<label for="d9" value="光明" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 光明</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input id="s8" name="q" type="radio" value="y"/>
<label for="s8" value="是" style="font-size:30px;padding:0 60px 0 0;"> 是</label>
<input id="s9" name="q" type="radio" value="n" />
<label for="s9" value="否" style="font-size:30px"> 否</label>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input name="question" id="d10" type="checkbox" value="1" />
<label for="d10" value="广告" style="sursor: pointer; font-size:30px;padding:0 30px 0 0">广告 </label>
<input name="question" id="d11" type="checkbox" value="2"/>
<label for="d11" value="实惠" style="sursor: pointer; font-size:30px;padding:0 20px 0 0"> 实惠</label>
<input name="question" id="d12" type="checkbox" value="3"/>
<label for="d12" value="富有年轻时尚感" style="sursor: pointer; font-size:30px; padding:0 15px 0 0">富有年轻时尚感 </label>
</div>
<div align="left" style="padding:55px 0 0 45px">
<input name="question" id="s10" type="radio" value="1" />
<label for="s10" value="餐前" style="sursor: pointer; font-size:30px; padding:0 30px 0 0">餐前 </label>
<input name="question" id="s11" type="radio" value="2"/>
<label for="s11" value="餐后" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 餐后</label>
<input name="question" id="s12" type="radio" value="3" />
<label for="s12" value="睡前" style="sursor: pointer; font-size:30px; padding:0 15px 0 0"> 睡前</label>
</div>
</div>
</div>
</div>
</div>
<div id="pager">
<div> </div>
</div>
<script>
(function(){
var labels=document.getElementsByTagName('label'),
inputs=document.getElementsByTagName('input');
function map(arr,fn){
var res=[],v;
for(var i=0,L=arr.length;i<L;i++){
v=fn(arr[i],i);
v!==null&&res.push(v);
}
return res;
}
function ges(es,att,attv){
return map(es,function(v,i){
return v.getAttribute(att)==attv?v:null;
});
};
function findLabel(el){
while( el&& el.tagName!='LABEL' ){
el= el.nextSibling
}
return el;
}
map(inputs,function(v,i){
if( v.type=='radio'||v.type=='checkbox'){
v.onchange=changeValue;
}
});
function changeColor(es){
map(es,function(v,i){
var lb=findLabel(v);
if(lb) lb.className=v.checked?'checked':'uncheck';
});
}
function changeValue(){
var es= ges(inputs,'name',this.name);
changeColor(es);
}
window.onload=function(){
changeColor(inputs);
}
})()
</script></body>
</html>
因为我做的是可以拖拽的问卷，
<div class="slidePageContent bgcolor2" style="background-image:url(img/2.jpg);>
是第一个页面，后面能判断div class="slidePageContent bgcolor3 ,4,5 不同的
我想问下选中的颜色能不同吗？有些背景颜色比较红，选了看不清了，如果不行的话，我就选个中性的颜色
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="mousePoint"> </div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<script>
function nextSibling(o) {
while (o = o.nextSibling)if (o.nodeType == 1) return o;
return false;
}
function onClickColor(o) {
if (o.type == 'radio') {//为单选设置标签为默认的颜色
var lbs = o.parentNode.getElementsByTagName('label');
for (var i = 0; i < lbs.length; i++) lbs[i].style.color ='inherit';
}
var cl = o.getAttribute('cl');
if (!cl) cl = 'red';//如果没有cl自定义属性则默认红色
nextSibling(o).style.color = o.checked ? cl : 'inherit';//设置标签为红色或者继承的样色
}
</script>
<div style="font-family:'Adobe 黑体 Std R';">
<div align="left" style="padding:135px 0 0 45px; " >
<input id="s1" name="q" type="radio" value="m" onclick="onClickColor(this);" cl="yellow"/>
<label for="s1" value="男" style="padding:0 60px 0 0;font-size:30px" > 男</label>
<input id="s2" name="q" type="radio" value="f" onclick="onClickColor(this);" cl="blue"/>
<label for="s2" value="女" style="font-size:30px; padding:0 50px 0 0" > 女</label>
</div>
<div align="left" style="padding:65px 0 0 45px;" >
<input name="question" id="s3" type="radio" value="s"/>
<label for="s3" value="学生" style="sursor: pointer;font-size:30px; padding:0 30px 0 0" > 学生</label>
<input name="question" id="s4" type="radio" value="o"/>
<label for="s4" value="上班族" style="sursor: pointer; font-size:30px; padding:0 15px 0 0" > 上班族</label>
<input name="question" id="s5" type="radio" value="p"/>
<label for="s5" value="自由职业者" style="sursor: pointer; font-size:30px;" > 自由职业者</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input name="question" id="d1" type="checkbox" value="1" onClick="onClickColor(this)"/>
<label for="d1" value="碳酸" style="sursor: pointer; font-size:30px; padding:0 35px 0 0" > <span>碳酸</span></label>
<input name="question" id="d2" type="checkbox" value="2" onClick="onClickColor(this)"/>
<label for="d2" value="果蔬" style="sursor: pointer; font-size:30px; padding:0 45px 0 0" > 果蔬</label>
<input name="question" id="d3" type="checkbox" value="3" onClick="onClickColor(this)"/>
<label for="d3" value="含乳" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 含乳</label>
<div style="padding:5px 0 0 0">
<input name="question" id="d4" type="checkbox" value="4" />
<label for="d4" value="茶饮料" style="sursor: pointer; font-size:30px; padding:0 5px 0 0" > 茶饮料</label>
<input name="question" id="d5" type="checkbox" value="5"/>
<label for="d5" value="其他" style="sursor: pointer;font-size:30px; padding:0 50px 0 0" > 其他</label>
</div>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input id="s6" name="q" type="radio" value="y" />
<label for="s6" value="是" style="padding:0 60px 0 0;font-size:30px"> 是</label>
<input id="s7" name="q" type="radio" value="n"/>
<label for="s7" value="否" style="font-size:30px; padding:0 50px 0 0"> 否</label>
</div>
</div>
<div style="-family:'Adobe 黑体 Std R'">
<div align="left" style="padding:150px 0 0 45px;">
<input name="question" id="d6" type="checkbox" value="1"/>
<label for="d6" value="蒙牛" style="sursor: pointer; font-size:30px; padding:0 30px 0 0"> 蒙牛</label>
<input name="question" id="d7" type="checkbox" value="2" />
<label for="d7" value="伊利" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 伊利</label>
<input name="question" id="d8" type="checkbox" value="3" />
<label for="d8" value="卫岗" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 卫岗</label>
<input name="question" id="d9" type="checkbox" value="4" />
<label for="d9" value="光明" style="sursor: pointer;font-size:30px; padding:0 15px 0 0"> 光明</label>
</div>
<div align="left" style="padding:55px 0 0 45px;">
<input id="s8" name="q" type="radio" value="y"/>
<label for="s8" value="是" style="font-size:30px;padding:0 60px 0 0;"> 是</label>
<input id="s9" name="q" type="radio" value="n" />
<label for="s9" value="否" style="font-size:30px"> 否</label>
</div>
<div align="left" style="padding:65px 0 0 45px;">
<input name="question" id="d10" type="checkbox" value="1" />
<label for="d10" value="广告" style="sursor: pointer; font-size:30px;padding:0 30px 0 0">广告 </label>
<input name="question" id="d11" type="checkbox" value="2"/>
<label for="d11" value="实惠" style="sursor: pointer; font-size:30px;padding:0 20px 0 0"> 实惠</label>
<input name="question" id="d12" type="checkbox" value="3"/>
<label for="d12" value="富有年轻时尚感" style="sursor: pointer; font-size:30px; padding:0 15px 0 0">富有年轻时尚感 </label>
</div>
<div align="left" style="padding:55px 0 0 45px">
<input name="question" id="s10" type="radio" value="1" />
<label for="s10" value="餐前" style="sursor: pointer; font-size:30px; padding:0 30px 0 0">餐前 </label>
<input name="question" id="s11" type="radio" value="2"/>
<label for="s11" value="餐后" style="sursor: pointer; font-size:30px; padding:0 20px 0 0"> 餐后</label>
<input name="question" id="s12" type="radio" value="3" />
<label for="s12" value="睡前" style="sursor: pointer; font-size:30px; padding:0 15px 0 0"> 睡前</label>
</div>
</div>
</div>
</div>
</div>
<div id="pager">
<div></div>
</div>
</body>
</html>