您的位置：首页 > Web前端 > JQuery

jquery 实现checkbox的全选，全不选，反选

2016-06-15 17:01 591 查看

页面代码：

<body>

<form method="post" action="">

你爱好的运动是？

<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="checkbox" id="CheckedAllAndNo" value="全选/全不选"/>

<input type="button" id="send" value="提　交"/>

</form>

</body>

js代码;

<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
$("input[type='checkbox']").prop("checked",true);
});
//全不选
$("#CheckedNo").click(function(){
$("input[type='checkbox']").prop("checked",false);
});

//反选
$("#CheckedRev").click(function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
//全选和全不选在通过一个checkbox完成
$("#CheckedAllAndNo").click(function(){
if($("#CheckedAllAndNo").prop("checked")==true){
$("input:lt(4)").prop("checked",true);
}else{
$("input:lt(4)").prop("checked",false);
}

});

});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jquery checkbox

相关文章推荐

新的分享

章节导航