jquery操作checkbox

xb68 9年前發布 | 2K 次閱讀 JavaScript jQuery

checkbox操作

1. 全選、全不選

2.打印所有的選中項目 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
     <head>  
      <title>  </title>  
      <script type="text/javascript" src="jquery-1.3.2.js"></script>  
      <script>  
        // 全選、全不選  
        function docChkBoxChange(){  
             var isChecked = jQuery('#docChkBoxTop').attr('checked');  
             // 設置以下所有的 checkBox 列表  
             jQuery("input[name=docChkBox]").each(function(){  
                this.checked = isChecked;  
             });  
        }//end function  
        // 打印所有的選中項目  
        function printChoose(){  
             var isChecked = jQuery('#docChkBoxTop').attr('checked');  
             // 設置以下所有的 checkBox 列表  
             jQuery("input[name=docChkBox]").each(function(){  
                if(this.checked){  
                    alert(this.value)  
                }  
             });  
        }//end function  
      </script>  
     </head>  

     <body>  
      <table>  
        <tr>  
            <td>  
                <input id='docChkBoxTop' type="checkbox" onClick='docChkBoxChange()'>全選、全不選  
            </td>  
        </tr>  
        <tr>  
            <td>  
                <input name='docChkBox' type="checkbox"  value='apple'>蘋果  
            </td>  
        </tr>  
        <tr>  
            <td>  
                <input name='docChkBox' type="checkbox"  value='banana'>香蕉  
            </td>  
        </tr>  

        <tr>  
            <td>  
                <input  type="button"  value='打印所有選中項' onClick='printChoose()'>  
            </td>  
        </tr>  
      </table>  
     </body>  
    </html>

 本文由用戶 xb68 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！