JQuery判断radio（单选框）是否选中

谁践踏了优雅 2023-03-01 10:07 4阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbG9nZW5pdXM_size_16_color_FFFFFF_t_70]

## 一 项目需求 ##

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

![format_png][]

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

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

## 二 需求分析 ##

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

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

![format_png 1][]

## 三 解决方案 ##

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

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

//选择的检查项数量
    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")`,谢谢大家阅读。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbG9nZW5pdXM_size_16_color_FFFFFF_t_70]: /images/20230209/034e179e4aa24a63bae1f3c6bad5f863.png
[format_png]: /images/20230209/d665690ec6b64a99b3f254f2d3ffd6d1.png
[format_png 1]: /images/20230209/aa2057fcd4464dfca8c00e8a082210aa.png