CODEWITHSUNDEEP
javascriptjquery
AnApprentice
AnApprentice

Reputation: 111080

On Click, knowing if the element clicked is a checkbox?

I used to use the following to know if a clicked item was a checkbox:

if ($(e.target).className === 'checkbox') {}

After upgrading to the latest version of jQuery this now returns undefined for Chrome, Safari and Firefox.

What is the best way to determine if a click happened on a checkbox?

Thanks

Upvotes: 0

Views: 277

Answers (5)

Xitalogy
Xitalogy

Reputation: 1612

This seems to work for me:

window.addEventListener('load', function () {

    function onClick() {
        if (this.tagName.toUpperCase() === 'INPUT' && this.type.toUpperCase() === 'CHECKBOX') {
            console.log([this.tagName, this.type])
        } else {
            console.log("HTML Element has Wrong tag or type");
        }
    };

    document.getElementById("myCheckBox").addEventListener('click', onClick);
    document.getElementById("myButton").addEventListener('click', onClick);
});

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <label><input id="myCheckBox" type="checkbox" />Click Me!</label>
    <input type="button" id="myButton" value="Click Me!" />
    <script type="text/javascript" src="detectElementType.js"></script>
</body>
</html>

See it in action here (hit F12 in Chrome to see console, or open FireBug console, etc.):

http://www.sanbarcomputing.com/flat/forumPosts/detectElementType/detectElementType.html

addEventListener() is not supported by all browsers (new in ECMAScript 5) but has advantages. See an article on event handlers here:

http://www.javascripter.net/faq/addeventlistenerattachevent.htm

Upvotes: 0

haakon.io
haakon.io

Reputation: 477

       $(document).ready(function () {
       $("input:checkbox").click(function () {
           if ($(this).is(":checked")) {
               //Do Stuff if Checked
           } 
       });
   });

Upvotes: 0

Ian
Ian

Reputation: 50933

I think you're mixing things up.

className is an attribute of an element, not a jQuery object. So if you really wanted to get the class without jQuery, you'd use:

e.target.className == "checkbox"

But the problem with that is that the className may be multiple classes separated by spaces, so you'd want to use a regex or something similar to actually find it.

If you wanted to do it in jQuery, I'd use:

$(e.target).hasClass("checkbox")

If you are truly looking for a checkbox element, you could use any of the following:

e.target.tagName.toLowerCase() == "input" && e.target.type.toLowerCase() == "checkbox"
$(e.target).is("input:checkbox")  // jQuery docs for :checkbox selector suggest including "input"
$(e.target).is('[type="checkbox"]')  // jQuery docs also suggest to use this instead of the above because it's faster than :checkbox in modern browsers

http://api.jquery.com/checkbox-selector/

Upvotes: 3

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

Try using .is function and :checkbox selector

if ($(e.target).is(':checkbox')) {
   //it is a checkbox
}

DEMO: http://jsfiddle.net/a5SbG/1/

or You can try

if (e.target.type == 'checkbox') { 
  //It is a checkbox
}

DEMO: http://jsfiddle.net/a5SbG/

Upvotes: 3

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67211

With straight JS, I usually do:

var eTarget = e.target !== null ? e.target : e.srcElement;

if (eTarget.type === 'checkbox') { }

Upvotes: 1

Related Questions