<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>请输入关键词</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" class="ipt">歌曲1<br>
<input type="checkbox" class="ipt">歌曲2<br>
<input type="checkbox" class="ipt">歌曲3<br>
<input type="checkbox" class="ipt">歌曲4<br>
<input type="checkbox" class="ipt">歌曲5<br>
<input type="button" class="btn1" value="全选">
<input type="button" class="btn2" value="全不选">
<input type="button" class="btn3" value="反选">
<script type="text/javascript">
$(function(){
$(".btn1").click(function(){
$("input:checkbox").attr("checked",true);
});
$(".btn2").click(function(){
$("input:checkbox").attr("checked",false);
});
$(".btn3").click(function(){
$("input:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
});
})
</script>
</body>
</html>
javascript实现全选、全不选、反选.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反选</title>
<script type="text/javascript"> //提示: 事件需要加给 #checkedAll_2, 获取 name=items 的 checkbox 数组
//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
//若没有被选择, 则 name=items 的 checkbox 都要取消选择
//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
//checked = false 取消选择. //还需要给每个 name=items 的 checkbox 加响应函数
//判断 name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
//若都被选择: 则使 #checkedAll_2 被选择
window.onload=function(){
//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.
document.getElementById("checkedAll_2").onclick=function(){
var flag=this.checked;
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].checked=flag;
}
}
//给每个item添加事件
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//记录有多少个items被选中了
var number=0;
for(var j=0;j<items.length;j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked=(items.length==number);
}
}
//全选
document.getElementById("CheckedAll").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = true;
}
}
//全不选
document.getElementById("CheckedNo").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = false;
}
}
//反选
document.getElementById("CheckedRev").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = !items[i].checked;
}
}
//提交
document.getElementById("send").onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items"m value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球<br/>
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
</body>
</html>