效果如图，选择一个尺码或图片，按第一次时候赋值，按第二次时候取消值，随之效果改变

代码如下：
css文件


  1. .noselectdiv   
  2. {   
  3.     margin-left:12px;   
  4.     cursor:pointer;   
  5.     text-indent:0;   
  6.     float:left;   
  7.     height:20px; line-height:20px;   
  8.     border:2px solid #666;   
  9.     color:Green;   
  10.     }   
  11. .selectdiv   
  12. {   
  13.     margin-left:12px;   
  14.     cursor:pointer;   
  15.     text-indent:0;   
  16.     height:20px; line-height:20px;   
  17.     float:left;   
  18.     border:2px solid red;   
  19.     color:Green;   
  20.     font-weight:bold;   
  21.     color:red;   
  22.     }  
.noselectdiv
{
	margin-left:12px;
	cursor:pointer;
	text-indent:0;
	float:left;
	height:20px; line-height:20px;
	border:2px solid #666;
	color:Green;
	}
.selectdiv
{
	margin-left:12px;
	cursor:pointer;
	text-indent:0;
	height:20px; line-height:20px;
	float:left;
	border:2px solid red;
	color:Green;
	font-weight:bold;
	color:red;
	}

js文件

查看代码 复制到剪贴板
  1. function checkPcolor(cid) {   
  2.        $("#pcolorshowbox" + cid).toggleClass("selectdiv");   
  3.        var hiddenColorValueObject = $("#ctl00_cph1_ctrlCheckoutAttributes_hiddenPcolors");   
  4.        var colorValues = hiddenColorValueObject.val();   
  5.        var colorValuesArray = new Array();   
  6.        //如果是第一次填写颜色 会没有任何值   
  7.        if (colorValues == "") {   
  8.            colorValuesArray.push(cid); //直接把值写入   
  9.        }   
  10.        else {   
  11.            colorValuesArray = colorValues.split(",");   
  12.            //此时肯定有一个颜色 列表显示   
  13.            var hasSta = true;   
  14.            for (i = 0; i < colorValuesArray.length; i++) {   
  15.                //如果id已经有了说明要取消！   
  16.                if (cid == colorValuesArray[i]) {   
  17.                    colorValuesArray.splice(i, 1);   
  18.                    hasSta = false;   
  19.                    break;   
  20.                }   
  21.            }   
  22.            if (hasSta) {   
  23.                colorValuesArray.push(cid);   
  24.            }   
  25.        }   
  26.        var nowColorValues = colorValuesArray.join(",");   
  27.        hiddenColorValueObject.val(nowColorValues);   
  28.    }  
 function checkPcolor(cid) {
        $("#pcolorshowbox" + cid).toggleClass("selectdiv");
        var hiddenColorValueObject = $("#ctl00_cph1_ctrlCheckoutAttributes_hiddenPcolors");
        var colorValues = hiddenColorValueObject.val();
        var colorValuesArray = new Array();
        //如果是第一次填写颜色 会没有任何值
        if (colorValues == "") {
            colorValuesArray.push(cid); //直接把值写入
        }
        else {
            colorValuesArray = colorValues.split(",");
            //此时肯定有一个颜色 列表显示
            var hasSta = true;
            for (i = 0; i < colorValuesArray.length; i++) {
                //如果id已经有了说明要取消！
                if (cid == colorValuesArray[i]) {
                    colorValuesArray.splice(i, 1);
                    hasSta = false;
                    break;
                }
            }
            if (hasSta) {
                colorValuesArray.push(cid);
            }
        }
        var nowColorValues = colorValuesArray.join(",");
        hiddenColorValueObject.val(nowColorValues);
    }

html代码


  1. <DIV id="psizeshowbox<%=size.ProductSizeID %>" class=noselectdiv onclick="checkPsize('<%=size.ProductSizeID %>')"> <%=size.PrductSizeName%> </DIV>  
  2.   
  3. <ASP:HIDDENFIELD id=hiddenPsizes runat="server" />  
  4. <ASP:HIDDENFIELD id=hiddenPcolors runat="server" />   
 <%=size.PrductSizeName%>