1

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

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

该表单还有一个“重置”按钮（带有idof 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');
  }
});

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

未检查

“checked”属性的新值：true”

检查

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

未检查

“checked”属性的新值：未定义

未检查

“checked”属性的新值：未定义

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

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

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

4

1 回答 1

1

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

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

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

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

于 2014-07-04T12:07:21.200 回答