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

代码如下:
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%>?