可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery.js'></script>
</head>
<body>
<p><input type="checkbox">篮球</p>
<p><input type="checkbox">唱歌</p>
<p><input type="checkbox">旅游</p>
<p><input type="checkbox">美食</p>
<input type="button" value="全选" name="all">
<input type="button" value="全不选" name="none">
<input type="button" value="反选" name="reverse"> </body>
<script>
//这个地方在谷歌浏览器有问题,点全不选后再点全选没有效果,ie里面没问题。
//checked在html里面是一个属性,不管checked=''里面是啥,都会默认选中。
$('[name=all]').click(function(){
$('p input').attr({'checked':true});
});
$('[name=none]').click(function(){
$('p input').removeAttr('checked',false);
});
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象,checked是一个属性
this.checked = !this.checked;
});
});
</script>
</html>
修改后,chrome也可以用了:
<script>
//这个地方在谷歌浏览器有问题,点全不选后再点全选没有效果,ie里面没问题。
//checked在html里面是一个属性,不管checked=''里面是啥,都会默认选中。
$('[name=all]').click(function(){
//jqery负责遍历,js的this改变checked的true和false
$('p input').each(function(){
this.checked = true;
});
});
$('[name=none]').click(function(){
//同上
$('p input').each(function(){
this.checked = false;
}); });
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象,checked是一个属性
// alert(!this.checked);
this.checked = !this.checked;
});
});
</script>
</html>
再次改进,使用prop()方法,专门修改固有属性,比如checked:
<script>
$('[name=all]').click(function(){
$(':checkbox').prop('checked',true);
});
$('[name=none]').click(function(){
$(':checkbox').prop('checked',false);
});
$('[name=anti]').click(function(){
$(':checkbox').each(function(){
var isTrue = !$(this).prop('checked');
// alert(isTrue);
$(this).prop('checked',isTrue);
});
});
</script>