从另一个处理程序取消选中单选按钮后，用于基于另一个输入字段检查单选按钮的处理程序停止工作答案

【问题标题】：Handler for checking radio button based on another input field stops working after unchecking radio button from another handler从另一个处理程序取消选中单选按钮后，用于基于另一个输入字段检查单选按钮的处理程序停止工作
【发布时间】：2014-07-04 11:59:23
【问题描述】：

我有一个带有单选按钮和文本输入字段的表单：

<input type="radio" name="foo" value="bar">
<input id="baz" type="text">
...

文本输入字段有一个与之关联的 keyup 处理程序，当我开始在文本输入字段中输入时，它将检查单选按钮：

$('#baz').on('keyup', function() {
  var bar = $('input[name="foo"][value="bar"]');
  if (!bar.is(':checked')) {
    bar.prop('checked', true);
  }
});

该表单还有一个“重置”按钮（带有reset 的id）和以下click 处理程序：

$('#reset').on('click', function() {
  $('input[type="radio"]').prop('checked', false);
  $('input').val('');
});

问题：输入字段的keyup 处理程序在单击“重置”按钮后停止工作。

当我像这样调用console.log 来扩充处理程序时：

$('#baz').on('keyup', function() {
  var bar = $('input[name="foo"][value="bar"]');
  if (!bar.is(':checked')) {
    console.log('not checked');
    bar.prop('checked', true);
    console.log('New value for "checked" property: ' + bar.prop('checked'));
  } else {
    console.log('checked');
  }
});

当我输入两个字符之前点击“重置”按钮时，我得到以下输出：

未检查

“checked”属性的新值：true"

检查

当输入两个字符后点击“重置”按钮，输出如下：

未检查

“已检查”属性的新值：未定义

未检查

“已检查”属性的新值：未定义

单选按钮的checked 属性现在是undefined，而不是false。（我假设这就是 keyup 处理程序无法再设置它的原因？）

我想了解这里发生了什么。单击“重置”后，如何修改代码以保持keyup 处理程序的功能？

我觉得我遗漏了一些明显的东西，但到目前为止，我还无法在这里或其他地方找到解决这个问题的方法。

【问题讨论】：

标签： jquery radio-button jquery-events prop

【解决方案1】：

在您的#reset 事件处理程序中，您将所有输入元素的value 设置为''。

在您的keyup 处理程序中，您使用其name 和value 选择单选按钮：

var bar = $('input[name="foo"][value="bar"]');

什么都不选择，因为您不再拥有input[value="bar"]

【讨论】：