- HTML code
<html> <style> .unchecked{ border: 1px solid gray; padding: 5px; } .checked{ border: 2px solid #c00; padding: 5px; } </style> <script src="http://code.jquery.com/jquery-1.4.2.min.js" ></script> <script type="text/javascript"> var obj={ colorSpan:"", sizeSpan:"" }; function change(span) { $('span[name="'+$(span).attr('name')+'"]').each(function(){ if(this.checked&&this!=span) { this.className="unchecked"; this.checked=false; } }); obj[$(span).attr('name')]=span.innerHTML; span.className="checked"; span.checked=true; select(); } function select() { var html=''; for(var i in obj) { if(obj[i]!='') { html+='<font color=orange>"'+ obj[i]+'"</font> 、'; } } html='<b> 已选择:</b> '+html.slice(0,html.length-1); $('#resultSpan')(html); } </script> <body> <br /> <div> 颜色: <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);' colorId="1">卡其格</span> <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);' colorId="2" >黑白格</span> </div> <br /> <br /> <div> 尺码: <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' sizeId="1">S</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' sizeId="2">M</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' sizeId="3">L</span> </div> <br /> <br /> <div> <b>提示:</b> <span id='resultSpan'></span> </div><div></div> </body> </html> 我在JAVASCRIPT区也发有一个同样的帖子, 没有人回答, 所以在这里再提问一次!!
以上的HTML可以正常运行, 但还有一个要求我不知道怎样做 ( 其实上面也是抄淘宝的, 呵呵 ), 现在说下:
如果 颜色 "卡其格" 只有 "S" 和 "M" 尺寸的, 那么, 当选中颜色 "卡其格" 的时候, "L" 码就不可操作, 即不可选择这个颜色; 相反, 当选择 "L"码的时候 , 颜色 "卡其格" 就不可操作, 请教怎样实现呢???
------解决方案--------------------------------------------------------
把其他 样式弄成灰色边框 并且 标签的 鼠标指针为cursor：not-allowed 样式
------解决方案--------------------------------------------------------
我也想知道。。。。
------解决方案--------------------------------------------------------
代码看着眼熟~
------解决方案--------------------------------------------------------
模拟 html radio 的单选效果
http://blog.csdn.net/Sandy945/archive/2010/04/22/5514036.aspx
这个？
------解决方案--------------------------------------------------------
就是判断
这里面用到了JQuery，添加对JQuery脚本的引用
------解决方案--------------------------------------------------------
------解决方案--------------------------------------------------------
他要做判断的。。。比如说某断码 或者颜色的衣服没有了 就不能选