CODEWITHSUNDEEP
javascripthtmlcssfunction
user5695111
user5695111

Reputation: 109

Checkbox unclick event Javascript

I have problem that checkbox uncheck event. When I unclick the checkbox it should be revert back. How can I do this? 

<body>
<script>
 function change()
    {
        var cb = document.querySelectorAll('input[type="checkbox"]')[0];
        var td = document.querySelectorAll("td[contenteditable]")[0];

        cb.addEventListener("click", function () {
            td.className = td.className + " crossed";
        });
    }
</script>
</body>

Upvotes: 1

Views: 2205

Answers (3)

David Thomas
David Thomas

Reputation: 253318

While you've already accepted an answer, I'd suggest a minor adjustment to the following:

function change() {
    // querySelector() returns the first element matching the
    // selector (or null, if no matching element is found):
    var cb = document.querySelector('input[type="checkbox"]'),
        td = document.querySelector("td[contenteditable]");

    // use the change event on the check-box:
    cb.addEventListener("change", function () {

        // adds, or removes, the class 'crossed'
        // based on the assessment that follows;
        // of the cb node is checked (true) the
        // class is added (if not already present),
        // otherwise it's removed:
        td.classList.toggle('crossed', cb.checked);
    });
}

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

Either toggle the class like:

cb.addEventListener("click", function () {
   td.classList.toggle("crossed");
});

JSFiddle Demo
Or check if the checkbox is checked:

cb.addEventListener("click", function () {
  if(cb.checked) td.classList.add("crossed");
  else td.classList.remove("crossed");
});

JSFiddle Demo

If you want to keep the older browser support, you can do it like:

   cb.addEventListener("click", function() {
     if (cb.checked) td.className += " crossed";
     else {
       var tdclass = td.className.split(" "),
         ind = tdclass.indexOf("crossed");
       tdclass.splice(ind, 1).join(" ");
       td.className = tdclass;
     }
   });

JSFiddle Demo

Upvotes: 3

Apoorv Mittal
Apoorv Mittal

Reputation: 89

okay u want a tick to be re-enable when u click on it to unclick!!!

$("input[type='checkbox']").props('checked','false') {
    $("input[type='checkbox']").props('checked','true')
}

Try to use a selector like id or something in place of: input[type='checkbox']

Upvotes: -2

Related Questions