jquery - Can't understand why this error(Uncaught TypeError: $(...).is(...).each is not a function) got on?

Question

I was doing a simple code of appending the values of checkboxes and I encountered this error. It is a mystery for me why this error was shown. I have figured out the way to write it correctly but I would very much like to know why this error occurred? Tried the technique given in a question previously asked but it didn't work- jquery - is not a function error

Code with error:

$(document).ready(function(){
	$("input[type='checkbox']").click(function(){
		
		$("#msg").html(" ");
		
		 $("input[type='checkbox']").is(':checked').each(function(){
			$("#msg").append(this.value);
			
			})
		})	
	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="fruits[]" value="mango">mango
<input type="checkbox" name="fruits[]" value="apple">apple
<input type="checkbox" name="fruits[]" value="cherry">cherry
<div id="msg"></div>

Answer 1

$("input[type='checkbox']").is(':checked') is a test that returns a Boolean (true/false). true.each() does not make sense, neither does false.each().

$("input[type='checkbox']:checked") returns a collection of jQuery elements that you can iterate over using $.each.