How to undo the last set checkbox?

Question

Hi, I created a javascript function to check if the number of selected modules is greater than the given value. Therefore, every time a flag is called, a function is called, and the function goes through all the flags and calculates the total to see if it is more. But the problem is that the user checks the checkbox, and if the total credits are greater than the value, I want to set the checkbox as checked = false. But I can not check this box. Does javascript have a last-click undo function?

Answer 1

Not really, but you can easily fake it by keeping the last click. This code may not work verbatim, but you get the idea:

<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 2

Using jQuery , you can do something like:

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

If you've never used jQuery before, it certainly looks like a pain for your eyes; but as you can see, it is very powerful, and your problem can be solved in a few lines. I would recommend you to study it and try to try;)

Answer 3

, , , , ?

Answer 4

, , , , , .

Answer 5

I suggest either checking whether the maximum number of objects was checked, or if true deleted the check all in the same method, or you set the value to some hidden text field in the identifier field of your last flag so that you can refer to it again.

Answer 6

Here's a minimal but fully functional and jQuery smaller solution:

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