stackoom
  简体   繁体   中英

conflict between Native JS and jQuery

 原文  2017-06-20 03:12:24  3   2    javascript/ jquery/ html

Question

I was going through a text book and got caught up with a problem in an example.

Here's my 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>

If you click the "reversed check" button first, the "check all" and "check none" buttons won't work when you click them. Then I changed the codes under the click Event of button "reversed checked" to jQuery functions. Here's the revised js codes: 

 $(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!!! }); }); })

In this case, if you manually check any checkbox, any of the three buttons won't work on that specific checkbox.

I suspect there's might be a subtle conflict between native HTML-JS attributes and jQuery functions.

I'd really appreciate some of you guys telling me the mechanism that leads to this malfunction. Thanks!

2 answers

solution1
 1  2017-06-20 03:15:38

Don't set the attribute , set the property . (Which is what this.checked = ... is doing.) That is, use jQuery's .prop() method not .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>

solution2
 0  2017-06-20 03:46:15

try this... 

 $(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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Conflict between jQuery and another js conflict between hammer.js and jquery Grails conflict between jQuery Plugin and JS script jQuery conflict with native prototype Conflict between jQuery and Zoomooz.js: animate & zoomTarget at the same time Possible conflict while setting function between JQuery and vanilla JS? How can I solve a conflict between to js/jquery files? Conflict between 2 scripts in jquery Conflict between jquery and bootstrap jQuery conflict between scripts
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM