在点击事件回调中获取$(this)选中的单选选项的值

Question

检查单选按钮系列的值，我有这样的代码:

$('input:radio[name="question13"]').click(
function() {
if ($('input:radio[name="question13"]:checked').val() == 'Yes') {
$('input[name="file_upload"]').prop('required', true)
} else if ($('input:radio[name="question13"]:checked').val() == 'No') {
$('input[name="file_upload"]').removeProp('required')
}
}
).triggerHandler('click');

这是有效的，但是你能在回调中用$(this)代替$('input:radio[name="question13"]:checked')吗?

Answer 1

如果你只有是/否，那么你可以这样做:

var isYes = $(this).val() == "Yes";

，因为你只能点击一个收音机来设置它，或者，换一种方式，任何点击一个收音机将使该收音机:checked。

---

如果有更多的选项，你想知道哪个选项，然后因为它是一个单选，你想获得相关的:checked元素(这可能是一个不同的元素)，那么你需要获得name的点击单选:

$(this).attr("name")

还是

this.name

然后找到相关的:checked输入:

$(`input:radio[name="${this.name}"]:checked`)

下面是一个示例代码片段，使用了一些推断出来的HTML，并包括两个"问题"的一个处理程序:

$('input:radio').click(function() {
var yesNo = $(`input:radio[name="${this.name}"]:checked`).val();

// do something with Yes/No
$(this).nextAll("div").first().text(yesNo === "Yes" ? "*" : "");
});

input + div { display: inline-block; color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' name='question13' value='Yes'>Yes
<input type='radio' name='question13' value='No'>No
<div></div>
<hr/>
<input type='radio' name='question14' value='Yes'>Yes
<input type='radio' name='question14' value='No'>No
<div></div>

---

在只有Yes/No值的情况下，您可以推断，如果您单击的元素未被选中，则另一个是。

做一个更简单的检查:

var isYes = $(this).is(":checked") && $(this).val() == "Yes";

但是你不能"uncheck"一个radio，如果你点击了它，那么:checked必须是你点击的那个，只给:

var isYes = $(this).val() == "Yes";

$('input:radio').click(function() {
var isYes = $(this).val() == "Yes";

// do something with Yes/No
$(this).nextAll("div").first().text(isYes ? "*" : "");
});

input + div { display: inline-block; color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' name='question13' value='Yes'>Yes
<input type='radio' name='question13' value='No'>No
<div></div>
<hr/>
<input type='radio' name='question14' value='Yes'>Yes
<input type='radio' name='question14' value='No'>No
<div></div>