jsp实现checkbox全选,js实现checkbox全选

本文介绍了一种使用JavaScript实现网页中多个复选框全选与反选的方法。通过两个函数allCheck与checkT_F,可以控制是否全部选中或取消所有复选框的选择状态。同时,当部分复选框被手动选择时,能够自动更新全选按钮的状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Js代码:

function allCheck(){

    var obj=document.getElementsByTagName("input");

    if(document.getElementById("all").checked==true){

        for(var i=0;i<obj.length;i++){

            obj[i].checked=true;

        }

    }else{

        for(var i=0;i<obj.length;i++){

            obj[i].checked=false;

        }

    }

}

function checkT_F(){

    var obj=document.getElementsByTagName("input");

    var j=0;

    for(var i=0;i<obj.length;i++){

        if(obj[i].id!='all'){    //如果是复选框

            if(obj[i].checked==true){    //并且为选中

                j++;

            }

        }

    }

    if(j==(obj.length-1)){    //如果复选框选中的数量等于(复选框总和减去全选这个选框的数量)

        document.getElementById("all").checked=true; //全选被激活

    }else{

        document.getElementById("all").checked=false;   

    }

}

 

 

 

Jsp页面:在这里主要看checkboxid值和name值,要和js中的一致

    <tr>

              <td><input type="checkbox" value="aa" id="1" name="chk"></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

           </tr>

           <tr>

              <td><input type="checkbox" value="bb" id="2" name="chk"></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

           </tr>

           <tr>

              <td><input type="checkbox" value="cc" id="3" name="chk"></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

           </tr>

           <tr>

              <td><input type="checkbox" value="dd" id="4" name="chk"></td>

              <td></td>

              <td></td>

              <td></td>

               <td></td>

              <td></td>

              <td></td>

           </tr>

           <tr>

              <td colspan="6">

                  <hr size="1">

              </td>

           </tr>

           <tr bgcolor="green" bordercolor="green">

              <td>

                  <input type="checkbox" name="allCK" id="all" onclick="javascript:allCheck()">全选

               </td>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值