使用div实现单选按钮而不使用radio

最新推荐文章于 2023-02-27 22:29:46 发布

茫茫沧海一云生

最新推荐文章于 2023-02-27 22:29:46 发布

阅读量884

点赞数

分类专栏：前台开发文章标签： js css3 html5 jquery

本文链接：https://blog.csdn.net/cjs5525/article/details/110389556

版权

前台开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过addClass、removeClass和toggleClass实现

html:

<p>请选择产品类型：</p>
<div>
	<div class="oneOfNineCell">1万</div>
	<div class="oneOfNineCell">2万</div>
	<div class="oneOfNineCell">3万</div>
	<div class="oneOfNineCell">4万</div>
	<div class="oneOfNineCell">5万</div>
	<div class="oneOfNineCell">6万</div>
	<div class="oneOfNineCell">7万</div>
	<div class="oneOfNineCell">8万</div>
</div>

js:

$(".oneOfNineCell").click(function () {
    $(this).siblings('div').removeClass('oneOfNineCell_Click').addClass('oneOfNineCell');
    $(this).toggleClass('oneOfNineCell');
    $(this).toggleClass('oneOfNineCell_Click');
})

css:

.oneOfNineCell {
	border: 1px solid #2A93BC;
	border-radius: 3px;
	cursor: pointer;
}
.oneOfNineCell_Click {
	border: 1px solid #2A93BC;
	border-radius: 3px;
	cursor: pointer;
	background-color: grey;
	color: #FFFFFF;
}