CODEWITHSUNDEEP
javascriptjqueryhtml
Benedict Gu
Benedict Gu

Reputation: 1

conflict between Native JS and jQuery

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!

Upvotes: 0

Views: 67

Answers (2)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

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>

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150010

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>

Upvotes: 1

Related Questions