JQuery判断radio(单选框)是否选中

在这里插入图片描述

一 项目需求

今天产品小哥甩给我一个需求,大概如下

这是一个检查页面,检查人员可以对每一项检查内容勾选符合或者不符合;

由于业务变更,现在要求所有检查项检查人员必须检查,换句话说,就是对于每一项检查,要么你勾选符合,要么你勾选不符合,不能不勾选;

二 需求分析

首先看了一下以前老哥写的源码,每一个单选框实现如下图所示

<td>
	<label for="02scoreMM01" class="icheck-radio">		
		<input type="radio" id="02scoreMM01" radio_type ="02scoreMM01" name="scoreMM01" value="0">	
		<div class="icheck-media"></div>
		<div class="icheck-inner">
			<div class="icheck-title">不符合</div>
		</div>
	</label>
</td>

对于每一个检查项来说,符合不符合是互斥的

三 解决方案

咨询了大佬们,提供了很多方法,最后我就选择了一种偷懒的办法,

因为这里不用去管检查人员选择的是符合还是不符合,只要他选择按钮的数量和检查项数量保持一致,那就证明它检查了所有检查项

//选择的检查项数量
var count = 0;
//总检查项数量
var total = 58

/**
 * 判断是否检查完
 * @returns {boolean}
 */
function radioChecked() {

	$("input[type='radio']").each(function (i) {
		if ($(this).attr("name") != 'unit') {
			if ($(this).is(":checked")) {
				count++;
				console.log('选中了' + count);
			}
		}
	});
	if (count != total) {
		//数量不一致,校验不通过
		return false;
	} else {
		return true;
	}
}

四 总结

通过这个需求,学习了jqueryinput[type='radio']这种选择器和如何判断radio是否被选中$(this).is(":checked"),谢谢大家阅读。

猜你喜欢

转载自blog.csdn.net/Milogenius/article/details/107548270