注意:jquery 提供的$(’#id’).attr(‘checked’,true)方法,在某些情况下会失效… 因此,使用js原生的 .checked = true方法 控制
// html
<form>
你爱好的运动是? <br/>
<input type="checkbox" name="items" value="足球" /> 足球
<input type="checkbox" name="items" value="蓝球" /> 蓝球
<input type="checkbox" name="items" 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>
// js
// 全选
$('#checkedAll').click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = true
})
return false // 阻止冒泡
})
// 全不选
$('#checkedNo').click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = false;
});
return false
})
// 反选
$('#checkedRev').click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !this.checked;
})
return false
})
// 提交
$('#send').click(function(){
var str = "你选中的是: \r\n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"\r\n";
});
alert(str);
})
参考《锋利的jQuery》P145~P147