Comment restaurer les données de la boîte de texte

J’ai un petit besoin

Nous avons restauré les données de la zone de texte précédemment effacées.
Ci-dessous mon code HTMl

Voici mon code 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(?) } }); 

Mon exigence est d’effacer le contenu de la zone de texte si la case à cocher est cochée. Et si je le désélectionne, la zone de texte doit être restaurée avec les données précédentes.

S’il vous plaît, aidez-moi.

Utilisez une variable globale pour stocker les données précédentes –

 var prevData; 

puis modifiez votre code de cette façon –

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

Lorsque la case à cocher est cochée, stockez-la à l’aide de l’ .data() jQuery .data() avant d’effacer la valeur.

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

Une démo qui fonctionne s’il y avait plusieurs paires, tant qu’elles existent dans des parents

séparés. Vous pouvez changer le viseur pour obtenir le frère précédent si ce n’était pas le cas. Cela n’utilise pas de variables globales qui ne sont pas vraiment la meilleure pratique – Comment éviter les variables globales en JavaScript? .

Edit: Mise à jour de la démonstration basée sur votre autre question. L’événement Keydown ne fonctionne pas correctement, mais cela ne s’applique que pour les événements clés et non si quelqu’un colle du texte dans .

Je suggérerais quelque chose d’un peu moins dépendant de la majoration restante (bien que cela nécessite que la case à cocher suive le texte saisi):

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

Démo de JS Fiddle .


Modifié pour supprimer le problème de n’avoir qu’une seule variable pour stocker la valeur d’entrée de texte:

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

Démo de JS Fiddle .


Modifié pour supprimer l’exigence explicite que les éléments d’ input soient contenus dans une 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]); } }); 

Démo de JS Fiddle .


Références:

  • :checkbox sélecteur de :checkbox .
  • change() .
  • is() .
  • :checked sélecteur :checked .
  • index() .
  • val() .