gpt4 book ai didi

javascript - Native JS 和 jQuery 之间的冲突

转载 作者:行者123 更新时间:2023-12-03 04:03:59 28 4
gpt4 key购买 nike

我正在阅读一本教科书,并在示例中遇到了一个问题。

这是我的 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 函数之间可能存在微妙的冲突。

我真的很感激你们中的一些人告诉我导致此故障的机制。谢谢!

最佳答案

不要设置属性,而是设置属性。 (这就是 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>

关于javascript - Native JS 和 jQuery 之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44643228/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com