JS对checkbox全选和取消全选

原文链接: http://www.cnblogs.com/sincoolvip/p/6518645.html

需求:checkbox控制列表数据全选与取消全选择。

效果图:

JS对checkbox全选和取消全选_第1张图片

1、html

<body >
          <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/>
          <input type="file" id="File1" name="File1" style="display:none;">
        <input type="button" name="outbtn" value="导出"/>
        
    <table border="1">
        
        <tr> 
            <td><input  id="all" type="checkbox" name="yon" onclick="chk()"/>td>
            <td>IDtd>
            <td>地区td>
        tr>
        <c:forEach items="${dislist }" var="dis">
            <tr>
            <td><input id="mychk" type="checkbox" name="mychk"/>td>
            <td>${dis.id }td>
            <td>${dis.name }td>

        tr>
     c:forEach>
     
    table>

  body>

2、js

<script type="text/javascript" src="js/jquery-1.8.3.js">script>
    
    <script type="text/javascript">
        /* $("#all").click(function(){
            alert("11111111");
            if(this.checked){
                alert("2222");
                $("mychk").prop("checked",true);
            }else{
                $("mychk").prop("checked",false);
            }
        
        }); */
        function chk(){
            var all = document.getElementById("all");
            var mychk = document.getElementsByName("mychk");
            alert("mychk长度=="+mychk.length);
            if(all.checked==true){
                alert("all.checked==true全选");
                if(mychk.length){
                    for(var i=0;i<mychk.length;i++){
                        mychk[i].checked = true;
                    }
                
                }
                mychk.chcked=true;
            }else{
                alert("all.checked==false全不选");
                if(mychk.length){
                    for(var i=0;i<mychk.length;i++){
                        mychk[i].checked = false;
                    }
                
                }
            }
            
        }   
    script>

 

转载于:https://www.cnblogs.com/sincoolvip/p/6518645.html

你可能感兴趣的:(JS对checkbox全选和取消全选)