一 项目需求
今天产品小哥甩给我一个需求,大概如下
这是一个检查页面,检查人员可以对每一项检查内容勾选符合
或者不符合
;
由于业务变更,现在要求所有检查项检查人员必须检查,换句话说,就是对于每一项检查,要么你勾选符合
,要么你勾选不符合
,不能不勾选;
二 需求分析
首先看了一下以前老哥写的源码,每一个单选框
实现如下图所示
<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;
}
}
四 总结
通过这个需求,学习了jquery
的input[type='radio']
这种选择器和如何判断radio
是否被选中$(this).is(":checked")
,谢谢大家阅读。