How to restore Textbox Data

I have a small requirement,

We have restore the textbox data that was cleared previously.

Below is my HTMl code

<table>
   <tr><td><input type="textbox"></td></tr>
   <tr><td><input type="chec开发者_Go百科kbox"></td></tr>
</table>

Here is my JQuery Code

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

My Requirement is to clear the textbox content if checkbox is checked. And if i deselect it the textbox should be restored with previous data.

Please someone help me.

---

Use a global variable to store the previous data -

var prevData;

then modify your code this way -

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

---

When the checkbox is being checked, before clearing the value, store it using the 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 which works if there were multiple pairs, so long as they exist in separate <table> parents. You could change the finder to get the previous sibling if that were not the case. This uses no global variables which are not really best practice - How to avoid global variables in JavaScript?.

Edit: Updated demo based on your other question Keydown event is not working properly but this will only for key events and not if someone pastes text into the <input>.

---

I'd suggest something a little less reliant on the mark-up remaining the same (though it does require that the checkbox follows the text input):

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.

---

Edited to remove the problem of having only one variable to store the text-input value:

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.

---

Edited to remove the explicit requirement that the input elements be contained in a 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.

---

References:

• :checkbox selector.
• change().
• is().
• :checked selector.
• index().
• val().