Question

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

这是我的HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您点击＆＃34;反向检查＆＃34;按钮首先，＆＃34;检查全部＆＃34;并且＆＃34;检查无＆＃34;单击它们时按钮不起作用。然后我在点击事件按钮＆＃34;反向检查＆＃34;下更改了代码。到jQuery函数。这是修订后的js代码：

＆＃13;

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

＆＃13;

在这种情况下，如果您手动选中任何复选框，则三个按钮中的任何一个都不会对该特定复选框起作用。

我怀疑原生HTML-JS属性和jQuery函数之间可能存在细微的冲突。

我真的很感谢你们中的一些人告诉我导致这种故障的机制。谢谢！

Answer 1

不要设置属性，设置属性。（这是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>

Answer 2

试试这个......

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

Native JS和jQuery之间的冲突

2 个答案: