Jquery 实现全选和反选

使用jQuery实现全选和反选


首先要导入jquery库(这个需要各位亲们自己来引入咯,* - * )

<script type="text/javascript" src="./js/jquery-1.9.0.js"></script>


主要<body>体里面的内容为以下代码(友友们不要介意,希望多多包涵)

<ul id="list">
<li><label><input type="checkbox" value="1">1.时间都去哪儿了</input></label></li>
<li><label><input type="checkbox" value="2">2.海阔天空</input></label></li>
<li><label><input type="checkbox" value="3">3.真的爱你</input></label></li>
<li><label><input type="checkbox" value="4">4.不再犹豫</input></label></li>
<li><label><input type="checkbox" value="5">5.光辉岁月</input></label></li>
<li><label><input type="checkbox" value="6">6.喜欢你</input></label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" id="selectAll" class="btn" value="全选">
<input type="button" id="unSelect" class="btn" value="全不选">
<input type="button" id="reverse" class="btn" value="反选">


下面就是正式jquery操作咯:

1.点击全选的复选框

$('#all').click(function() {
$('#list :checkbox').attr("checked", this.checked);
});


2.全选按钮

$('#selectAll').click(function(){
$('#list :checkbox, #all').prop("checked", true);
});


3.全不选按钮

$('#unSelect').click(function(){
$('#list :checkbox, #all').prop("checked", false);
});


4.反选按钮

$('#reverse').click(function(){
$('#list :checkbox').each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
allchk();
});


5.每个复选框

$('#list :checkbox').click(function(){
allchk();
});


/**
* 检测全选框#all应该是选中状态还是未选中状态
 */
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
$("#list :checkbox").each(function () {   
  if($(this).prop("checked")==true){ 
  chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
$("#all").prop("checked",true); 
}else{//不全选 
$("#all").prop("checked",false); 
 } 


以上便是这次的主要代码咯,如果有不当的地方,忘友友多多见谅,顺便提出一些意见,   谢谢!!


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值