Comment annuler la dernière case cochée?

Question

Salut J'ai créé une fonction javascript pour vérifier si le nombre de modules sélectionnés est supérieur à une valeur donnée. Ainsi, à chaque fois qu'une case à cocher est appelée, la fonction est appelée, et la fonction passe par toutes les cases à cocher et calcule le total pour voir si elle est plus grande. Mais le problème est lorsque l'utilisateur coche la case et si le total des crédits est supérieur à la valeur, je veux cocher la case check = false. Mais je ne sais pas quelle case à cocher annuler. Y a-t-il une fonction Annuler le dernier clic en JavaScript?

Answer 1

Je sais que ce n'est pas la réponse que vous recherchiez, mais ne serait-ce pas une meilleure expérience utilisateur de désactiver toutes les cases non cochées lorsque le nombre maximum de chèques a été atteint?

Answer 2

Je ne pense pas qu'il existe, mais vous pouvez toujours enregistrer une référence à la dernière case cochée, donc quand vous devez le décocher, vous l'avez là.

Answer 3

Pas vraiment, mais vous pourriez simuler assez facilement en sauvant la dernière case cliquée. Ce code ne fonctionne pas mot pour mot, mais vous voyez l'idée:

<script> 
var last_checked_box; 

function onBoxClicked(box) { 
    if (box.checked) last_checked_box = box; 
} 

function undoLastBox() { 
    if (last_checked_box) last_checked_box.checked = false; 
} 
</script> 

<input type="checkbox" id="box1" onClick="onBoxClicked(this)"/> 
... 

Answer 4

En utilisant jQuery, vous pouvez faire quelque chose comme:

var MAX_CREDITS = 50; // just as an example 
$("input[type=checkbox]").change(function(){ 
    var totalCredits = 0; 
    $("input[type=checkbox]").each(function(){ 
    // augment totalCredits accordingly to each checkbox. 
    }); 

    if(totalCredits > MAX_CREDITS){ 
    $(this).removeAttr("checked"); 
    } 
}); 

Si vous ne l'avez jamais utilisé jQuery avant, c'est sûrement comme un douleur pour vos yeux; mais comme vous pouvez le voir, c'est très puissant et votre problème peut être résolu en quelques lignes. Je vous recommande de l'apprendre et de l'essayer;)

Answer 5

Je suggère soit de tester si le nombre maximum d'objets a été vérifié et si cela est vrai, de supprimer le tout dans la même méthode ou de définir la valeur à quelque chose de caché zone de texte à l'ID de votre dernière case à cocher activée afin que vous puissiez le référencer à nouveau.

Answer 6

est ici une solution minimale, mais entièrement fonctionnelle et jQuery moins:

<script> 
function isBox(element) { 
    return element.form && element.form === document.forms[0] && 
     element.nodeName.toLowerCase() === 'input' && 
     element.type === 'checkbox'; 
} 

function remaining(dR) { 
    var field = document.forms[0].elements[0], 
     value = +field.value; 

    if(dR) return field.value = value + dR; 
    else return value; 
} 

function listener(event) { 
    var box = (event && event.target) || 
     (window.event && window.event.srcElement); 

    if(isBox(box)) { 
     if(box.checked) { 
      if(remaining() > 0) 
       remaining(-1); 
      else box.checked = false; 
     } 
     else remaining(+1); 
    } 
} 

if(document.addEventListener) 
    document.addEventListener('click', listener, false); 
else if(document.attachEvent) 
    document.attachEvent('onclick', listener); 
</script> 
<form> 
<p>remaining: <input type="text" readonly="readonly" value="2"></p> 
<p><input type="checkbox" id="b1"><label for="b1">box1</label></p> 
<p><input type="checkbox" id="b2"><label for="b2">box2</label></p> 
<p><input type="checkbox" id="b3"><label for="b3">box3</label></p> 
</form>