使用input的checkbox属性实现标签的多选点击效果

使用input的checkbox属性实现标签的多选点击效果,使用counter的css属性实现标签选中之后的个数.

样式:

                /* checkbox隐藏 */
		[type="checkbox"]{
		    position: absolute;
		    clip: rect(0 0 0 0);
		}
		
		
		/* 在父元素中创建或者重置计算器 */
		.topic-wrap{
			 counter-reset: topicCounter;
		}
		.topic{
			padding: 2px 10px;
			border: 1px solid #ccc;
			color: #333;
			border-radius: 5px;
		}
		/*  当checkbox在选中状态时递增变量 */
		:checked + .topic {
		    counter-increment: topicCounter;
			border-color: #EA5413;
			color: #EA5413;
		}
		/* 使用counter（）函数将计算器的值添加到元素中。 */
		.topic-counter::before {
		    color: red;
		    content: counter(topicCounter);
		}

代码:

        <div class="topic-wrap">
		<p>请选择你感兴趣的标签:</p>
		<input type="checkbox" id="topic1"><label for="topic1" class="topic">Vue</label>
		<input type="checkbox" id="topic2" checked><label for="topic2" class="topic">HTTP</label>
		<input type="checkbox" id="topic3"><label for="topic3" class="topic">ES6</label>
		<input type="checkbox" id="topic4"><label for="topic4" class="topic">微信</label>
		<input type="checkbox" id="topic5"><label for="topic5" class="topic">HTML</label>
		<input type="checkbox" id="topic6"><label for="topic6" class="topic">前端框架</label>
		<p>您已选择<span class="topic-counter"></span>个标签。</p>
	</div>

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/721

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！