By event.target, how I know that it is checkbox or it is radio?

Question

In my html:

<input type="checkbox" name="select">

<input type="radio" name="select">

name property same due to some logical reason

in my JS

I write below code:

$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
    console.log(event.target.nodename);
    // on both cases it show "INPUT"
    }

    }); 

How I will know that I click on checkbox or radio button?

Purge

Instead of using JQuery you can (ES6+) also use Element.matches() which returns a boolean. – Lui

Answer 1

.nodeName gives the html tag used so you have to use .type to get the type of the node there.

Try this one:

console.log(event.target.type);

Demo

Diffuse

Answer 2

For those of you looking for the pure JavaScript way, it's event.target.tagName.

That property is an uppercase string of the element type, like "A", "UL", "LI", etc.

Essene

This will always be INPUT since both radio buttons and checkboxes use the INPUT tag. You want to check the type property which will be either "radio" or "checkbox" – Denitadenitrate

Answer 3

console.log($(event.target).is(':radio'));
console.log($(event.target).is('[type="radio"]'));

Zetes

Answer 4

you can use event.target.getAttribute('type') instead

Rematch

Answer 5

Try to use attr() like,

console.log($(this).attr('type'));// checkbox or radio

Code

$('input[type="checkbox"],input[type="radio"]').on("change", function (event) {
    console.log($(this).prop('tagName'));// INPUT
    console.log($(this).attr('type'));// checkbox or radio
});

Internalcombustion

Answer 6

For the node type with jQuery you can use:

• $(event.target).attr('type')
• event.target .type

$("SELECTOR").click(function (event) {
var idEventTarget = $(event.target).attr('id');
console.log($(event.target).attr('type'));
console.log(event.target.type);
});

Barri

Answer 7

If the event passed to the progress or error event handler of an XMLHttpRequest, or an IDB success or error event handler, the target will be an XMLHttpRequest or (IDB Request?). There will be no getAttribute or nodeName property.

While there must be a better way, this will get the name of the event's target: targetname = Object.getPrototypeOf(ev.target).constructor.name.

For example, in the case of an http request, it returns "XMLHttpRequest".

Herodotus

Answer 8

You can try:

event.target.checkBoxName.checked

where checkbox html like:

<input type="checkbox" name="checkBoxName">

It will return true or false.

var isChecked = event.target.checkBoxName.checked;

Supermarket

I think the question was about checking if an event came from a checkbox or a radiobutton, but your answer is about checking if a checkbox is checked – Leucopenia

Answer 9

you can use

function test(e)
{
   var eve = e || window.event;
   var ele = eve.target || eve.srcElement;

   switch(ele.getAttribute('type'))
   {
     case "radio" : //do whatever

     case "checkbox" : //do
   }

}

Summarize