Question

我有一个小要求，

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

<table>
   <tr><td><input type="textbox"></td></tr>
   <tr><td><input type="checkbox"></td></tr>
</table>

这是我的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存储它。

<table>
   <tr><td><input type="text"></td></tr>
   <tr><td><input type="checkbox"></td></tr>
</table>

$('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'));
    }
});

A demo如果有多对，则有效，只要它们存在于单独的<table>父项中。如果不是这样的话，您可以更改查找程序以获取上一个兄弟。这不使用全局变量，这不是最佳实践 - How to avoid global variables in JavaScript?。

修改： Updated demo根据您的其他问题Keydown event is not working properly，但这仅适用于关键事件，而不是有人将文字粘贴到<input>。

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 Fiddle demo

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

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 Fiddle demo

已修改以删除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 Fiddle demo

参考文献：

如何恢复文本框数据

3 个答案: