Question

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

<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);
  }
});

表单还有一个“重置”按钮（id为reset）和以下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');
  }
});

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

未选中

“已检查”属性的新值：true“

检查

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

未选中

“已检查”属性的新值：undefined

未选中

“已检查”属性的新值：undefined

单选按钮的checked属性现在为undefined，而不是false。（我假设那就是为什么keyup处理程序不能再设置它了？）

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

我觉得我错过了一些明显的东西，但到目前为止，我还没有能够在这里或其他地方找到解决这个问题的方法。

Answer 1

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

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

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

没有选择任何内容，因为您不再拥有input[value="bar"]

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

1 个答案: