原生JS和jQuery之间的冲突
[英]conflict between Native JS and jQuery
问题描述
我正在读一本教科书，在一个示例中遇到了一个问题。
这是我的html：
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").attr("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked = !(this.checked); }); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <form> <label for="items">你最喜欢的运动是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
如果先单击“反向检查”按钮，则单击它们时“全部检查”和“不检查”按钮将不起作用。 然后，我将单击“反转检查”按钮的事件下的代码更改为jQuery函数。 这是修改后的js代码：
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").attr("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ $(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!! }); }); })
在这种情况下，如果您手动选中任何复选框，则三个按钮中的任何一个都将不适用于该特定复选框。
我怀疑原生HTML-JS属性和jQuery函数之间可能存在细微的冲突。
非常感谢你们告诉我导致这种故障的机制。 谢谢！
2 个解决方案
解决方案1
1 2017-06-20 03:15:38
不要设置属性 ，设置属性 。 （这是this.checked = ...的工作。）也就是说，使用jQuery的.prop()方法而不是.attr() 。
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").prop("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").prop("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked = !(this.checked); }); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <form> <label for="items">你最喜欢的运动是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
解决方案2
0 2017-06-20 03:46:15
尝试这个...
$(function(){ $("#checkAll").click(function(){ $("input[name=items]").prop("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("input[name=items]").prop("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("input[name=items]").each(function(){ this.checked = !(this.checked); }); }); })
<!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form> <label for="items">你最喜欢的运动是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
jQuery和Zoomooz.js之间的冲突：animate和zoomTarget同时出现
[英]Conflict between jQuery and Zoomooz.js: animate & zoomTarget at the same time
在 JQuery 和 vanilla JS 之间设置 function 时可能发生冲突？
[英]Possible conflict while setting function between JQuery and vanilla JS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.