jquery全选/全不选/反选另一种实现方法(配合原生js)

175 阅读 0 评论 116 点赞

我是靠谱客的博主醉熏毛衣，最近开发中收集的这篇文章主要介绍jquery全选/全不选/反选另一种实现方法(配合原生js)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script language="javascript" src="../css02/js/jquery-1.6.1.js"></script> 
<script> 
$(document).ready(function(){ 
$("#selectAll").click(function(){ 
//这里也可以直接用this,原生js语句 
if($(this)[0].checked){ 
$('[name=items]:checkbox').attr("checked",true); 
}else{ 
$('[name=items]:checkbox').attr("checked",false); 
} 
}); 
$("#XOR").click(function(){ 
$("[name=items]:checkbox").each(function(){ 
this.checked=!this.checked; 
}); 
}); 
}); 
</script> 
<title>Untitled Document</title> 
</head> 
<body> 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" id="selectAll" value="全选/不选"/>全选/全部选 
<input type="button" id="XOR" value="反选"/> 
</body> 
</html> 