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

jQuery实现复选框全选功能

2015-05-30 13:33 555 查看
使用jQuery实现复选框的功能，子框全选后，复选框自动选中；子框有一个未选中，复选框自动切换到未选中状态

js代码部分如下：

<script type="text/javascript">

function doCheckAll(obj){//点击复选框（全部）
var isCheck=obj.checked;
<span style="white-space:pre">		</span>var boxs=getAllBox();
if(boxs!="" && boxs.length>0){
for(var i=0;i<boxs.length;i++){
boxs[i].checked=isCheck;
}
}
}

function doCheckOne(obj){//点击复选框（单条数据）
var isCheck=obj.checked;
var all=$("input[name='all']")[0];
if(isCheck==false){
all.checked=false;
return;
}else{
var boxs=getAllBox();
var j=0;//选中个数
for(var k=0;k<boxs.length;k++){
if(boxs[k].checked==true){
j++;
}else{
<span style="white-space:pre">	</span>break;
}
}
if(j==boxs.length){
all.checked=true;//全选框选中
}
}
}

function getAllBox(){
var boxs=$("input[name='one']");
return boxs;
}

</script>



页面内容：

<body>
<table align="center" style="border:1px solid;" width="500">
<tr>
<td><input type="checkbox" name="all" id="checkboxAll" class="checkboxAll" onclick="doCheck(this)" /></td>
<td>全选</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" onclick="toChkSon(this);" value="1" class="checkboxOne" name="one"  /></td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" onclick="toChkSon(this);" value="2" class="checkboxOne" name="one"  /></td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" onclick="toChkSon(this);" value="3" class="checkboxOne" name="one"  /></td>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航