jquery操作checkbox详解编程语言

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>  

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8664.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论