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"),谢谢大家阅读。

### 如何在 jQuery 中设置单选框选中状态 在 jQuery 中,可以通过 `.prop()` 方法来设置单选框选中状态。以下是一个具体的实现示例: 当需要将某个单选框设置为选中状态时,可以使用如下代码[^1]: ```javascript $(document).ready(function() { $('#radio2').prop('checked', true); }); ``` 上述代码确保在 DOM 加载完成后执行,并通过 `#radio2` 选择器找到对应的单选框元素,然后将其属性 `checked` 设置为 `true`,从而实现选中状态。 此外,如果需要取消单选框选中状态,可以将 `true` 替换为 `false`[^3]: ```javascript $('#radioBtn').prop('checked', false); ``` ### 注意事项 - 确保在 DOM 完全加载后执行上述代码,否则可能会导致选择器无法正确找到目标元素。 - 使用 `.prop()` 方法而非 `.attr()` 方法,因为 `.prop()` 更适合操作布尔属性(如 `checked`、`disabled` 等)。 ### 示例代码完整版 以下是一个完整的示例代码,展示了如何设置和取消单选框选中状态: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 单选框示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="radio" id="radio1" name="example"> Radio 1 <input type="radio" id="radio2" name="example"> Radio 2 <input type="radio" id="radio3" name="example"> Radio 3 <script> $(document).ready(function() { // 设置 radio2 为选中状态 $('#radio2').prop('checked', true); // 取消 radio2 的选中状态 $('#radio2').prop('checked', false); }); </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值