js怎么实现判断下面图片哪个被选中

可以把上面的选项都加进列表里循环判断select是否为true

图片样式不同，可以根据样式来获取选中的图片

 如，用jquery的话$(".红色的样式")就是选中的节点。

根据样式筛选就可以了

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ page contentType="text/html;charset=GBK"%>
<%String path = request.getContextPath();%>

外钣金

/js/checkBox.js">
function banJinArea(){ document.getElementById("plateOne").style.border="3px solid red"; document.getElementById("plateThree").style.border="3px solid red"; document.getElementById("plateFive").style.border="3px solid red"; } function bianHong(id){ } function bianHong1(){ document.getElementById("plateOne").style.border="3px solid red"; document.getElementById("plateTwo").style.border="3px solid #CCC"; document.getElementById("plateOne").setAttribute("id","plateOne1"); matchSelected(); } function bianHong2(){ document.getElementById("plateTwo").style.border="3px solid red"; document.getElementById("plateOne").style.border="3px solid #CCC"; document.getElementById("plateTwo").setAttribute("id","plateTwo1"); matchSelected(); } function bianHong3(){ document.getElementById("plateThree").style.border="3px solid red"; document.getElementById("plateFour").style.border="3px solid #CCC"; document.getElementById("plateThree").setAttribute("id","plateThree1"); matchSelected(); } function bianHong4(){ document.getElementById("plateFour").style.border="3px solid red"; document.getElementById("plateThree").style.border="3px solid #CCC"; document.getElementById("plateFour").setAttribute("id","plateFour1"); matchSelected(); } function bianHong5(){ matchSelected(); document.getElementById("plateSix").style.border="3px solid #CCC"; document.getElementById("plateFive").style.border="3px solid red"; document.getElementById("plateFive").setAttribute("id","plateFive1"); } function bianHong6(){ matchSelected(); document.getElementById("plateSix").style.border="3px solid red"; document.getElementById("plateFive").style.border="3px solid #CCC"; document.getElementById("plateSix").setAttribute("id","plateSix1"); } //判断有几个被选中 function matchSelected(){ var tt1 = document.getElementById("plateOne1"); var tt2 = document.getElementById("plateTwo1"); var tt3 = document.getElementById("plateThree1"); var tt4 = document.getElementById("plateFour1"); var tt5 = document.getElementById("plateFive1"); var tt6 = document.getElementById("plateSix1"); if((tt1!="" || null !=tt1) && (tt3!="" || null !=tt3)&&(tt5!="" || null !=tt5)){ document.getElementById("nanduLevel").innerText="难度等级为A"; }else if((tt2!="" || null !=tt2) && (tt4!="" || null !=tt4)&&(tt6!="" || null !=tt6)){ document.getElementById("nanduLevel").innerText="难度等级为C"; }else { document.getElementById("nanduLevel").innerText="难度等级为B"; } var textfield=document.getElementById("textfield").value.replace(/\s+/g,""); if(""==textfield||null==textfield){ alert("请先填写钣金面积"); return; }else if(textfield>=200){ document.getElementById("textfield").value=""; alert("钣金面积过大，已经超出维修价值，请更换零件"); } } 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;}

</head>
<body onload="banJinArea()">
<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="<%=path%>/jsp/lpcx/plateOne.jpg" onclick="bianHong1()"><span>1.轻度损伤</span></td>
        <td width="50%"><img id="plateTwo" src="<%=path%>/jsp/lpcx/plateTwo.jpg" onclick="bianHong2()"><span>2.重度损伤</span></td>
      </tr>
      <tr>
        <td><img id="plateThree" src="<%=path%>/jsp/lpcx/plateThree.jpg" onclick="bianHong3()"><span>1.损伤部位无成型线</span></td>
        <td><img id="plateFour" src="<%=path%>/jsp/lpcx/plateFour.jpg" onclick="bianHong4()"><span>2.损伤部位有成型线或边缘</span></td>
      </tr>
      <tr>
        <td><img id="plateFive" src="<%=path%>/jsp/lpcx/plateFive.jpg" onclick="bianHong5()"><span>1.单层板件</span></td>
        <td><img id="plateSix" src="<%=path%>/jsp/lpcx/plateSix.jpg" onclick="bianHong6()"><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>

点击查看在线演示

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

//根据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>