0

我曾经使用以下内容来了解​​单击的项目是否是复选框：

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

升级到最新版本的 jQuery 后，现在对于 Chrome、Safari 和 Firefox 返回 undefined。

确定单击复选框是否发生的最佳方法是什么？

谢谢

4

5 回答 5

3

尝试使用.is函数和:checkbox选择器

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

演示：http: //jsfiddle.net/a5SbG/1/

或者你可以试试

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

演示：http: //jsfiddle.net/a5SbG/

于 2012-10-04T18:32:25.147 回答
3

我觉得你把事情搞混了。

className是元素的属性，而不是 jQuery 对象。因此，如果您真的想在没有 jQuery 的情况下获得课程，您可以使用：

e.target.className == "checkbox"

但问题在于className可能是多个由空格分隔的类，因此您需要使用正则表达式或类似的东西来实际找到它。

如果您想在 jQuery 中执行此操作，我会使用：

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

如果你真的在寻找一个复选框元素，你可以使用以下任何一种：

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/

于 2012-10-04T18:35:15.233 回答
1

使用直接 JS，我通常会这样做：

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

if (eTarget.type === 'checkbox') { }
于 2012-10-04T18:34:46.980 回答
0 
       $(document).ready(function () {
       $("input:checkbox").click(function () {
           if ($(this).is(":checked")) {
               //Do Stuff if Checked
           } 
       });
   });
于 2012-10-04T18:51:51.453 回答
0

这似乎对我有用：

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>

在此处查看实际操作（在 Chrome 中按 F12 以查看控制台，或打开 FireBug 控制台等）：

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

并非所有浏览器都支持 addEventListener()（ECMAScript 5 中的新功能），但具有优势。在此处查看有关事件处理程序的文章：

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

于 2012-10-04T18:56:11.243 回答