点击查看在线演示
CSS (增加selected, unselected两个样式，其他不变)
body,
ul,
li,
ol,
dl,
dt,
dd,
p,
h2,
h3,
img,
span,
i {
display: block;
border: none;
list-style: none;
margin: 0px;
padding: 0px;
font-size: 12px;
}
.main {
width: 698px;
height: 500px;
margin: 100px auto;
border: solid 1px #CCC;
}
.main dt {
width: 100%;
height: 33px;
background: url(tw_bj.jpg) repeat-x
}
.main dt h2 {
width: 60px;
text-align: center;
line-height: 33px;
height: 33px;
float: left;
}
.main dt span {
width: 40px;
height: 20px;
border: solid 1px #CCC;
border-top: none;
font-weight: bold;
line-height: 20px;
border-radius: 5px;
float: right;
text-align: center;
font-size: 20px;
margin-right: 5px;
}
.main dt span:hover {
cursor: pointer
}
.main dd {
clear: both;
width: 688px;
height: 461px;
border: solid 1px #ccc;
margin: 0px auto;
border-radius: 3px;
}
.main_tit {
width: 100%;
height: 50px;
margin: auto;
border: solid 1px #ccc
}
.main_tit span {
width: 100%;
height: 25px;
line-height: 25px;
text-align: center
}
.main_one {
width: 100%;
height: 40px;
}
.main_one span {
width: 60%;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
overflow: hidden
}
.main_one imput {
width: 40%;
float: right;
}
#textfield {
width: 200px;
height: 25px;
margin-top: 5px;
margin-left: 15px;
}
.main_nr {
width: 100%;
height: 200px;
border: solid 1px #ccc
}
.main_nr tr td img {
margin: 0px auto;
border: solid 3px #CCC
}
.main_nr tr td span {
height: 20px;
line-height: 20px;
text-align: center
}
.main_two {
width: 100%;
height: 40px;
border: solid 1px #ccc;
text-align: center;
line-height: 40px;
}
.main_two b {
color: #00F
}
.main_san {
width: 100%;
height: 40px;
}
.main_san input#button {
margin: 5px auto;
background: url(55.jpg) no-repeat 10px center;
padding-left: 20px;
display: block;
width: 80px;
height: 30px;
border: solid 1px #999;
border-radius: 5px;
}
.selected {
border: 3px solid red!important;
}
.unselected {
border: 3px solid #CCC!important;
}
JS
//根据id获取DOM元素
function $(id) {
return document.getElementById(id);
}
//判断是否为null或空白
function isNullOrEmpty(s) {
return (s == null || s == "");
}
//判断是否包含指定样式
//el为DOM元素id
//cls为需要判断是否包含的样式名称
function hasClass(el, cls) {
return (' ' + $(el).className + ' ').indexOf(' ' + cls + ' ') > -1;
}
//判断数组里面的元素是否都包含制定样式
//判断是否包含指定样式
//el为DOM元素id数组
//cls为需要判断是否包含的样式名称
function isAllSelected(els, cls) {
var i = 0;
for(el in els) {
if(hasClass(els[el], cls)) {
++i;
}
}
return i == els.length;
}
var ClassA = new Array("plateOne", "plateThree", "plateFive");
var ClassC = new Array("plateTwo", "plateFour", "plateSix");
var Plates = new Array(ClassA, ClassC);
//设置选中元素的样式，并取消相对应的元素的选中样式
function setSelect(i, j) {
$(Plates[i%2][j]).className = "selected";
$(Plates[(i+1)%2][j]).className = "unselected";
}
//判断有几个被选中
function matchSelected() {
var className = "selected";
if (isAllSelected(ClassA, className)) {
$("nanduLevel").innerHTML = "难度等级为A";
} else if (isAllSelected(ClassC, className)) {
$("nanduLevel").innerHTML = "难度等级为C";
} else {
$("nanduLevel").innerHTML = "难度等级为B";
}
var textfield = $("textfield").value.replace(/\s+/g, "");
if (isNullOrEmpty(textfield)) {
alert("请先填写钣金面积");
return;
} else if (textfield >= 200) {
$("textfield").value = "";
alert("钣金面积过大，已经超出维修价值，请更换零件");
}
}
HTML (替换onclick内的js函数)
<dl class="main">
<!-- <dt><h2>外钣金</h2><span>×</span></dt> -->
<dd>
<div class="main_tit">
<span>钣金项目[大师傅]</span>
<span>在确认之前请您先确认并选中一下的图片(</span><span style="color:red">红色</span><span>代表选中)</span>
</div>
<div class="main_one">
<span>钣金面积[零件标准面积 单位:平方分米]</span>
<form name="form1" method="post" action="">
<input type="text" name="textfield" id="textfield" />
</form>
</div>
<table class="main_nr" border="2px" bordercolor="#ccc" cellspacing="0px" style="border-collapse:collapse">
<tr>
<td width="50%"><img id="plateOne" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(0, 0);" /><span>1.轻度损伤</span></td>
<td width="50%"><img id="plateTwo" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(1, 0);" /><span>2.重度损伤</span></td>
</tr>
<tr>
<td><img id="plateThree" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(0, 1);" /><span>1.损伤部位无成型线</span></td>
<td><img id="plateFour" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(1, 1);" /><span>2.损伤部位有成型线或边缘</span></td>
</tr>
<tr>
<td><img id="plateFive" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(0, 2);" /><span>1.单层板件</span></td>
<td><img id="plateSix" src="http://images.cnitblog.com/news_topic/12-08-24%2023-47-29.gif" onclick="setSelect(1, 2);" /><span>2.多层板件</span></td>
</tr>
</table>
<div class="main_two" id="nanduLevel">难度等级为A</div>
<div align="center">
<form name="form2" method="post" action="">
<input type="submit" name="button" id="button" value="确定" />
</form>
</div>
</dd>
</dl>
图片说明](https://img-ask.csdn.net/upload/201507/06/1436150004_215326.png)
