如何恢复文本框数据

我有一个小要求，

我们已恢复之前已清除的文本框数据。
下面是我的HTMl代码

这是我的JQuery代码

  $('TABLE TR TD').find(':checkbox').change(function() { if($(this).prop('checked')) { $(this).parents('TR').siblings('TR').find('input').val("") } if(!$(this).prop('checked')) { $(this).parents('TR').siblings('TR').find('input').val(?) } }); 

我的要求是清除文本框内容，如果选中复选框。 如果我取消选择它，应该使用以前的数据恢复文本框。

请有人帮帮我

Answer 1

使用全局变量存储以前的数据 –

 var prevData; 

然后以这种方式修改你的代码 –

 $('TABLE TR TD').find(':checkbox').change(function() { if($(this).prop('checked')) { var $element = $(this).parents('TR').siblings('TR').find('input') prevData = $element.val(); $element.val(""); } else { $(this).parents('TR').siblings('TR').find('input').val(prevData); } }); 

Answer 2

检查复选框时，在清除值之前，使用jQuery .data() API存储它。

  $('input:checkbox').change(function() { var input = $(this).closest('table').find('input[type="text"]'); if ($(this).prop('checked')) { input.data('text', input.val()); input.val(''); } else { input.val(input.data('text')); } }); 

如果有多对，则可以运行的演示 ，只要它们存在于单独的

父级中。 如果不是这样的话，您可以更改查找程序以获取上一个兄弟。 这不使用全局变量，这不是最佳实践 – 如何避免JavaScript中的全局变量？ 。

编辑：基于您的其他问题更新了演示 Keydown事件无法正常工作，但这仅适用于关键事件，而不是有人将文本粘贴到 。

Answer 3

我建议一些不太依赖标记的东西保持不变（虽然它确实需要复选框跟在文本输入后）：

 var prevData, textInputIndex; $('input:checkbox').change( function(){ thisIndex = ($(this).index('table input') - 1); textInput = $('table input').eq(thisIndex); if ($(this).is(':checked')) { prevData = $(textInput).eq(thisIndex).val(); $(textInput).eq(thisIndex).val(''); } else { $(textInput).eq(thisIndex).val(prevData); } }); 

JS小提琴演示 。

---

编辑以消除只有一个变量来存储文本输入值的问题：

 var $textInputs = $('table input:text'); var prevData, textInputIndex, affectedTextInputIndex, textInputValues = []; $('input:checkbox').change( function(){ affectedTextInputIndex = $(this).index('table input') - 1; textInputIndex = $('table input').eq(affectedTextInputIndex).index('table input:text'); if ($(this).is(':checked')) { textInputValues[textInputIndex] = $textInputs.eq(textInputIndex).val(); $textInputs.eq(textInputIndex).val(''); } else { $textInputs.eq(textInputIndex).val(textInputValues[textInputIndex]); } }); 

JS小提琴演示 。

---

编辑删除input元素包含在table中的明确要求：

 var $textInputs = $('input:text'); var prevData, textInputIndex, affectedTextInputIndex, textInputValues = []; $('input:checkbox').change( function(){ affectedTextInputIndex = $(this).index('input') - 1; textInputIndex = $('ul input').eq(affectedTextInputIndex).index('input:text'); if ($(this).is(':checked')) { textInputValues[textInputIndex] = $textInputs.eq(textInputIndex).val(); $textInputs.eq(textInputIndex).val(''); } else { $textInputs.eq(textInputIndex).val(textInputValues[textInputIndex]); } }); 

JS小提琴演示 。

---

参考文献：

• :checkbox选择器 。
• change() 。
• is() 。
• :checked选择器 。
• index() 。
• val() 。