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函数之间可能存在微妙的冲突。
我真的很感激你们中的一些人告诉我导致这种故障的机制。谢谢!
文档类型之前,您不能把一个''
试试这个...
来源
2017-06-20 03:46:15