點擊後，知道單擊的元素是否爲複選框？

我用下面的知道，如果一個點擊項目是一個複選框：點擊後，知道單擊的元素是否爲複選框？

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

升級到最新版本的jQuery現在這個返回undefined爲Chrome，Safari和Firefox之後。

確定點擊是否發生在複選框上的最佳方法是什麼？

感謝

來源

2012-10-04 AnApprentice

是否真的與舊版本的jQuery的工作？怎麼樣？ – undefined

className是DOM elemtn的純javascript屬性，不是jQuery中的屬性或方法。你的代碼可能應該讀取'e.target.className ==='checkbox'，如果複選框有一個以上的類，它將會失敗。你可以嘗試'e.target.className.indexOf（'checkbox'）> -1'或'$（e.target）.hasClass（'checkbox'）;' –

嘗試使用.is功能和:checkbox選擇

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

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

，或者你可以嘗試

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

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

來源

2012-10-04 18:32:25

隨着直JS，我通常會做：

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

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

來源

2012-10-04 18:34:46

我想你混的事情了。

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-04 18:35:15 Ian

@DavidThomas是的，我編輯了答案之前10秒你發佈了。我可能也會使用'indexOf'，但是正則表達式可能會更好，因爲你可以有一個類「testing1」，並且想要看看「testing」是否是一個類 - 這是真的（但它確實是錯誤的） – Ian

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

來源

2012-10-04 18:51:51

這似乎爲我工作：

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>

看到它在行動這裏（打F12在Chrome中看到控制檯，或打開Firebug控制檯等）：

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

的addEventListener（）不受所有瀏覽器（ECMAScript 5中的新增功能）支持，但具有優勢。查看此事件處理程序的文章：

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

來源

2012-10-04 18:56:11 Aeoril

點擊後，知道單擊的元素是否爲複選框？

回答

相關問題