如何使用Jquery获取Form表单中被选中的radio值

老实说，当我开始摆弄 jQuery 时，获取单选按钮的值对我来说非常困惑。
当时我阅读在线教程时，对不同的方法印象深刻。
现在想来，也只有这么几个招数。
关键是要在正确的场景中使用它们。

首先我们来说说最直观的一个：:checked 伪类选择器。
这是最常用的方法。
只需编写这样的代码：$('formId input[name="opType"]:checked').val()。
我之前有一个项目。
用户表单中有许多单选按钮。
如果我想显示选定的内容，我可以使用这个。
这可以通过一行代码来完成。
任何人看到它都会知道。
当然，前提是你的form元素必须有正确的name属性，否则这个技巧不起作用。

有趣的是，有一个更简洁的表示法：$('input[name="opType"]:radio:checked').val()。
这行代码也能获取到值，不过说实话我第一次读的时候有点困惑。
两个选择者紧随其后：一个接一个，我的思绪在旋转。
当元素不多，但元素较多，或者新人看代码可能需要解释很长时间时，可以使用这种表示法。
因此，除非你特别喜欢简单，否则我不推荐它们。

现在我们来说说错误演示$('formId input[checked]').val()。
我当时也尝试过这个拼写，但是浏览器立即给我显示了4 04 后来我发现:checked不是一个属性而是一个伪类。
如果直接写[checked]，根本不会被识别。
这提醒我，在使用jQuery的时候，一定要记住选择器，不要盲目的写，否则调试会比写代码花更长的时间。

最后一个$.each遍历方法在涉及复杂逻辑时特别有用。
我之前有一个请求。
可以在表单中同时选择多个无线电，这需要特殊处理。
此时验证还不够，还得一一验证。
代码如下所示： $('formId input[name="opType"]').each(function() { if ($(this).is(':checked')) { warning(this.name + ': ' + this.value); } })。
虽然比直接获取值比较费力，但是更加灵活，可以处理各种棘手的操作。

说白了：选择哪种方法取决于你的需求。
对于简单值使用 :checked，对于复杂操作使用遍历。
记住不要犯直接写[勾选]的愚蠢错误，这样可以节省一些脑细胞。

研究jQuery如何处理复选框的勾选和取消选定

直接上干货。

1 .监控复选框变化 javascript $(文档).ready(函数() { $('复选框').change(function() { var check = $(this).prop('checked'); console.log(已检查？ '已检查': '未检查'); }); });
实时检测变化事件。

2 设置复选框状态 javascript $('checkbox').prop('checked', true); // 已检查 $('复选框').prop('选中', false); // 取消选中
prop可以直接改变状态。

3 更改复选框状态 javascript $('复选框').click(函数(e) { e.preventDefault(); var check = $(this).prop('checked'); $(this).prop('检查', !检查); console.log(已选中？'未选中': '已选中'); });
点击事件更改。

4 批量操作复选框 javascript $('.checkbox-group').prop('选中', true); // 全选 $('.checkbox-group').prop('选中', false); // 取消选中所有
$('.checkbox-group').each(function() { $(this).prop('已检查', !$(this).prop('已检查')); }); // 反转选择
类选择器并批量编辑它。

5 获取选定的值 javascript var 所选值 = []; $('input[name="options"]:checked').each(function() { selectedValues.push($(this).val()); }); console.log(selectedValues);
收集选定的值。

最佳实践：
实时监控更改事件。
自定义点击事件逻辑。

检查prop()操作，不要使用attr()。

很多复选框首先缓存 jQuery 对象。

加载 DOM 后运行。

就用它吧。