模拟 html radio 的单选效果

最新推荐文章于 2022-07-08 14:29:43 发布

转载最新推荐文章于 2022-07-08 14:29:43 发布 · 101 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhp404/articles/4450338.html

本文介绍了一种使用jQuery和纯JS实现多选框效果的方法，包括样式设置、事件监听以及数据选择展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://blog.youkuaiyun.com/sandy945/article/details/5514036

效果图:

效果图

代码如下:

（jQuery版）

[xhtml] view plain copy

<html>
<style>
.unchecked{
border: 1px solid gray;
padding: 6px 6px 6px 6px;
}
.checked{
border: 2px solid #c00;
padding: 6px 6px 6px 6px;
}
</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(html);
}
</script>
<body>
<br />
<div>
颜色: <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);' >卡其格</span> <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);' >黑白格</span>
</div>
<br />
<br />
<div>
尺码: <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' >S</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' >M</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' >L</span>
</div>
<br />
<br />
<div>
<b>提示:</b> <span id='resultSpan'></span>
</div>
</body>
</html>

(纯JS版)

[xhtml] view plain copy

<html>
<style>
.unchecked
{
border: 1px solid gray;
padding: 6px 6px 6px 6px;
}
.checked
{
border: 2px solid #c00;
padding: 6px 6px 6px 6px;
}
</style>
<body>
<br />
<div>
颜色: <span class='unchecked' name='colorSpan'>卡其格</span> <span class='unchecked' name='colorSpan'>
黑白格</span>
</div>
<br />
<br />
<div>
尺码: <span class='unchecked' name='sizeSpan'>S</span> <span class='unchecked' name='sizeSpan'>
M</span> <span class='unchecked' name='sizeSpan'>L</span>
</div>
<br />
<br />
<div>
<b>提示:</b> <span id='resultSpan'></span>
</div>
</body>
</html>

js代码

原帖地址:

转载于:https://www.cnblogs.com/zhp404/articles/4450338.html