jQuery单选框点击事件优化：如何使用$(this)获取当前选中单选框的值

你的思路完全正确——用$(this)替代重复的$('input:radio[name="question13"]:checked')选择器，既能让代码更简洁，还能避免重复查询DOM，提升一点性能。

为什么$(this)可行？ #

因为你把点击事件直接绑定在了每个name="question13"的单选按钮上，当用户点击某个单选框时，事件回调里的this就指向当前被点击的那个单选按钮DOM元素，而它此时必然是选中状态（单选按钮点击后自动切换选中状态），所以直接用$(this).val()就能拿到当前选中的值，完全不需要再重新查询整个单选组的选中项。

优化后的代码示例 #

我们可以进一步简化逻辑，让代码更清爽：

// 更精确的选择器（原生CSS支持，性能更好）
$('input[type="radio"][name="question13"]').click(function() {
  // 用$(this)获取当前点击的单选框值
  const needsUpload = $(this).val() === 'Yes';
  // 直接用布尔值设置required属性，替代冗余的if-else
  $('input[name="file_upload"]').prop('required', needsUpload);
}).triggerHandler('click');

额外的小优化点 #

• 选择器优化：用input[type="radio"][name="question13"]代替input:radio[name="question13"]，前者是原生CSS选择器，浏览器解析更快，而:radio是jQuery扩展的选择器，需要额外处理。
• 简化逻辑：把判断结果存成布尔变量needsUpload，直接传给prop('required')，避免写重复的if-else分支，代码可读性更强。
• 替代removeProp：原来的removeProp('required')换成prop('required', false)更稳妥，因为removeProp对于像required这类布尔属性，会彻底移除该属性，而有些浏览器可能对移除后的行为和设置false有差异，直接设置布尔值更符合表单属性的预期行为。

内容的提问来源于stack exchange，提问作者iateadonut