javascript - By event.target, how I know that it is checkbox or it is radio? - Stack Overflow

admin管理员组

文章数量:1134247

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?

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?

• javascript
• html
• jquery
• forms
• radio-button

Share Improve this question Follow edited Dec 24, 2020 at 6:24 PHP Guru 1,5011313 silver badges2222 bronze badges asked Nov 15, 2013 at 6:00 Rituraj ratanRituraj ratan 10.4k88 gold badges3737 silver badges5555 bronze badges 1

• Instead of using JQuery you can (ES6+) also use Element.matches() which returns a boolean. – Sebastian Barth Commented Sep 9, 2020 at 15:08

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 92

.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

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.

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

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

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

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

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

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;

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
   }

}

本文标签： javascriptBy eventtargethow I know that it is checkbox or it is radioStack Overflow