全选、全不选以及获取选中的值

HTML部分的布局是下面这样的：

		<ul id="list">
			<li><label ><input type="checkbox" value="1" />1.番茄</label></li>
			<li><label ><input type="checkbox" value="2" />2.黄瓜</label></li>
			<li><label ><input type="checkbox" value="3" />3.青椒</label></li>
			<li><label ><input type="checkbox" value="4" />4.蒜苗</label></li>
			<li><label ><input type="checkbox" value="5" />5.韭菜</label></li>
		</ul>
		<input type="checkbox"  id="All"/>
		<input type="button" value="全选" id="selectAll" />
		<input type="button" value="全不选" id="unSelect" />
		<input type="button" value="反选" id="reverse" />
		<input type="button" value="获取选中的值" id="getValue" />

关于javascript部分是这样写的：

		<script>
			//全选或全不选
			$('#All').click(function(){
				if(this.checked) {
					$('#list :checkbox').prop('checked',true)
				}else {
					$('#list :checkbox').prop('checked',false)
				}
			})
			
			//全选
			$('#selectAll').click(function(){
				$('#list :checkbox').prop('checked',true);
				$('#All').prop('checked',true)
			})
			
			//全不选
			$('#unSelect').click(function(){
				$('#list :checkbox').prop('checked',false);
				$('#All').prop('checked',false)
			})
			
			//反选
			$('#reverse').click(function(){
				$('#list :checkbox').each(function(){
					$(this).prop('checked',!$(this).prop('checked'))
				})
				if ($('#list :checkbox').length >$('#list :checkbox:checked').length) {
					$('#All').prop('checked',false)
				}else{
					$('#All').prop('checked',true)
				}
			})

			
			//获取得到的值
			var arr = []
			var i = -1;
			$('#getValue').click(function(){
				$('#list :checkbox:checked').each(function(){
					i ++;
					arr[i]=$(this).val();
				})
				console.log(arr)
			})
			
		</script>

最终实现效果。