【Jquery】Vue+Jquery判断单选题和多选题是否被选中且单选或多选后li class的切换

本文链接：https://blog.csdn.net/liuzhenhe1988/article/details/121741474

本文介绍了如何在Vue项目中利用HTML和JS处理单选和多选题目的样式切换。通过监听用户点击事件，动态修改li元素的class，实现单选时仅一个选项高亮，多选时可选多个选项并切换active样式。同时，代码还记录了用户的选择状态，更新题目是否已作答的标记。

摘要由CSDN通过智能技术生成

前言

近期在做一个有关用户考试的需求，用户在答题时有单选和多选，且单选或多选用的是同一的ul li，只不过单选时候只能选择其中一项，多选可以选择多项，那么就会涉及到单选或多选选择后切换不同的样式的问题，如下为具体实现

实现

1、先看一下html代码，注意li部分，li中定义了一个class（item.QuestionID）,以及li自己的id，将会通过这两个来实现不同的切换

<!--内容 开始-->
	<div class="L-content L-examination-content">
		<div class="L-question-item" v-for="(item,index) in QuestionAnswerList">
			<h3 class="L-question-title d-flex">
				<i class="flex-shrink-0">{{index+1}}</i><span class="pl-3 flex-shrink-1">{{item.Title}}</span>
			</h3>
			<small class="L-tips">Tips: {{item.QuestionType}}</small>
			<ul class="row L-answer-list" :id="item.QuestionID">
				<li class="col-md-6 col-sm-12" v-for="(optionItem,optionIndex) in item.Options">
					<a href="#" :class="'L-answer-item '+item.QuestionID" :id="optionItem.OptionID"
						v-on:click="On_Click_SelectAnswer(item,optionItem)"><span>{{optionItem.OptionName}}.</span>
						<p>{{optionItem.Title}}</p></a></li>
			</ul>
		</div>
		<div class="mb-4 mt-4">
			<a class="btn btn-danger L-examination-btn d-flex align-items-center"
				v-on:click="On_Click_Submit($event)"><i class="iconfont icon-doubleright mr-2"></i>Submit</a>
			<button class="btn btn-dark L-examination-btn d-flex align-items-center"><i class="iconfont icon-reload mr-1"></i>Retest</button>
		</div>
	</div>
	<!--内容 结束-->

2、js代码，注意说明部分即可

 On_Click_SelectAnswer: function (item, optionItem) {
                var that = this;
                if (item.QuestionType == "Single choice") {//如果为单选，先将同样的class都去掉active样式，然后再将自己的也就是点击的加上active
                    $("." + item.QuestionID).removeClass("active");
                    $("#" + optionItem.OptionID).addClass("active");
                } else {//如果为多选通过toggleClass来回切换即可
                    $("#" + optionItem.OptionID).toggleClass('active');
                }
                var isAnswer = false;
                //这一段代码为当改题目选择答案后即作答后将会记录改题目已经做了，用到了循环所有li，如果有class active属性即代表已选择了答案
                $("." + item.QuestionID).each(function () {
                    if ($(this).hasClass('active')) {
                        isAnswer = true;
                        return;
                    }
                });
                if (!isAnswer) {
                    $("#nav" + item.QuestionID).addClass("active");
                } else {
                    $("#nav" + item.QuestionID).removeClass("active");
                }


            },