最近更新
阅读排行
关注本站
如何实现input全选、清空、反选
阅读：3733 次 编辑日期：2013-12-18
目录：
概述：
在前端代码编写的过程中，我们经常需要用到选择框，从而进行条件的选择，但是如果要要实现一些附加功能，例如：全选，清空，反选应该如何实现？一起来看一下吧。
HTML 和 CSS代码如下：
CSS://
#warp{height:300px; margin:0 auto; overflow:hidden;color: #fff; f}
.kuang01{ width:150px; height:300px; background:#999; float:left;}
.kuang02{ width:150px; height:300px; background: #F63; float:left;}
.kuang03{ width:150px;; height:300px; background: #639; float:left;}
.kuang04{ width:150px;; height:300px; background: #000; float:left;}
HTML://
点击橙色区域全选
点击紫色区域清空选
点击橙色区域反选
如何实现全选：
$(document).ready(function(){
$(".kuang02").click(function(){
$(".kuang01 input").attr("checked","checked");
})
})
如何实现清空：
$(document).ready(function(){
$(".kuang03").click(function(){
$(".kuang01 input").attr("checked","");
})
})
如何实现反选：
$(document).ready(function(){
$(".kuang04").click(function(){
$("input").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
})
})
