2017-06-20 98 views
0

我正在閱讀一本教科書,並在例子中遇到了問題。Native JS和jQuery之間的衝突

這裏是我的html:

$(function(){ 
 
\t $("#checkAll").click(function(){ 
 
\t \t $("[name=items]:checkbox").attr("checked", true); 
 
\t \t console.log("check all"); 
 
\t }); 
 
\t $("#checkNo").click(function(){ 
 
\t \t $("[name=items]:checkbox").attr("checked", false); 
 
\t \t console.log("check none"); 
 
\t }); 
 
\t $("#checkRev").click(function(){ 
 
\t \t $("[name=items]:checkbox").each(function(){ 
 
\t \t \t this.checked = !(this.checked); 
 
\t \t }); 
 
\t }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>practice</title> 
 
\t <link rel="stylesheet" type="text/css" href="practice.css"> 
 
\t <script type="text/javascript" src="jquery-3.2.1.js"></script> 
 
</head> 
 
<body> 
 
\t <form> 
 
\t \t <label for="items">你最喜歡的運動是:</label><br> 
 
\t \t <input type="checkbox" name="items" value="羽毛球">羽毛球 
 
\t \t <input type="checkbox" name="items" value="籃球">籃球 
 
\t \t <input type="checkbox" name="items" value="足球">足球 
 
\t \t <input type="checkbox" name="items" value="乒乓球">乒乓球 
 
\t \t <br> 
 
\t \t <input type="button" id="checkAll" value="Check All"> 
 
\t \t <input type="button" id="checkNo" value="Check None"> 
 
\t \t <input type="button" id="checkRev" value="Reversed Check"> 
 
\t \t <input type="button" id="submit" value="Submit"> 
 
\t </form> 
 
\t <script type="text/javascript" src="practice.js"></script> 
 
</body> 
 
</html>

如果單擊「反向檢查」按鈕,第一,「檢查所有」和「查無」,當你點擊按鈕將無法正常工作他們。然後我改變了點擊事件按鈕「反向選中」代碼爲jQuery函數。下面是修改後的代碼JS:

$(function(){ 
 
\t $("#checkAll").click(function(){ 
 
\t \t $("[name=items]:checkbox").attr("checked", true); 
 
\t \t console.log("check all"); 
 
\t }); 
 
\t $("#checkNo").click(function(){ 
 
\t \t $("[name=items]:checkbox").attr("checked", false); 
 
\t \t console.log("check none"); 
 
\t }); 
 
\t $("#checkRev").click(function(){ 
 
\t \t $("[name=items]:checkbox").each(function(){ 
 
\t \t $(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!! 
 
\t \t }); 
 
\t }); 
 
})

在這種情況下,如果手動檢查任何複選框,任何三個按鈕不會對具體的複選框工作。

我懷疑原生HTML-JS屬性和jQuery函數之間可能存在微妙的衝突。

我真的很感激你們中的一些人告訴我導致這種故障的機制。謝謝!

+0

文檔類型之前,您不能把一個''

0

試試這個...

$(function(){ 
 
\t $("#checkAll").click(function(){ 
 
\t \t $("input[name=items]").prop("checked", true); 
 
\t \t console.log("check all"); 
 
\t }); 
 
\t $("#checkNo").click(function(){ 
 
\t \t $("input[name=items]").prop("checked", false); 
 
\t \t console.log("check none"); 
 
\t }); 
 
\t $("#checkRev").click(function(){ 
 
\t \t $("input[name=items]").each(function(){ 
 
\t \t \t this.checked = !(this.checked); 
 
\t \t }); 
 
\t }); 
 
})
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>practice</title> 
 
\t <link rel="stylesheet" type="text/css" href="practice.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <form> 
 
\t \t <label for="items">你最喜歡的運動是:</label><br> 
 
\t \t <input type="checkbox" name="items" value="羽毛球">羽毛球 
 
\t \t <input type="checkbox" name="items" value="籃球">籃球 
 
\t \t <input type="checkbox" name="items" value="足球">足球 
 
\t \t <input type="checkbox" name="items" value="乒乓球">乒乓球 
 
\t \t <br> 
 
\t \t <input type="button" id="checkAll" value="Check All"> 
 
\t \t <input type="button" id="checkNo" value="Check None"> 
 
\t \t <input type="button" id="checkRev" value="Reversed Check"> 
 
\t \t <input type="button" id="submit" value="Submit"> 
 
\t </form> 
 
\t <script type="text/javascript" src="practice.js"></script> 
 
</body> 
 
</html>