js中button事件的简单示例

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title></title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <script type="text/javascript">  
  7. window.onload = function(){//页面所有元素加载完毕  
  8.     var btn = document.getElementById("btn");  //获取id为btn的元素(button)  
  9.     btn.onclick = function(){                  //给元素添加onclick事件  
  10.         var arrays = new Array();              //创建一个数组对象  
  11.         var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)  
  12.         for(i=0; i < items.length; i++){  //循环这组数据  
  13.             if(items[i].checked){      //判断是否选中  
  14.                 arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.  
  15.             }  
  16.         }  
  17.         alert( "选中的个数为:"+arrays.length  );  
  18.     }  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. <form method="post" action="#">  
  24.     <input type="checkbox" value="1" name="check" checked="checked"/>  
  25.     <input type="checkbox" value="2" name="check" />  
  26.     <input type="checkbox" value="3" name="check" checked="checked"/>  
  27.     <input type="button" value="你选中的个数" id="btn"/>  
  28. </form>  
  29. </body>  
  30. </html>  

 //这样也算是实现了 表现层和行为层分离的效果。

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.onReady(function(){ // This function renders a block of buttons function renderButtons(title){ Ext.getBody().createChild({tag: 'h2', html: title}); new ButtonPanel( 'Text Only', [{ text: 'Add User' },{ text: 'Add User', scale: 'medium' },{ text: 'Add User', scale: 'large' }] ); new ButtonPanel( 'Icon Only', [{ iconCls: 'add16' },{ iconCls: 'add24', scale: 'medium' },{ iconCls: 'add', scale: 'large' }] ); new ButtonPanel( 'Icon and Text (left)', [{ text: 'Add User', iconCls: 'add16' },{ text: 'Add User', iconCls: 'add24', scale: 'medium' },{ text: 'Add User', iconCls: 'add', scale: 'large' }] ); new ButtonPanel( 'Icon and Text (top)', [{ text: 'Add User', iconCls: 'add16', iconAlign: 'top' },{ text: 'Add User', iconCls: 'add24', scale: 'medium', iconAlign: 'top' },{ text: 'Add User', iconCls: 'add', scale: 'large', iconAlign: 'top' }] ); new ButtonPanel( 'Icon and Text (right)', [{ text: 'Add User', iconCls: 'add16', iconAlign: 'right' },{ text: 'Add User', iconCls: 'add24', scale: 'medium', iconAlign: 'right' },{ text: 'Add User', iconCls: 'add', scale: 'large', iconAlign: 'right' }] ); new ButtonPanel( 'Icon and Text (bottom)', [{ text: 'Add User', iconCls: 'add16', iconAlign: 'bottom' },{ text: 'Add User', iconCls: 'add24', scale: 'medium', iconAlign: 'bottom' },{ text: 'Add User', iconCls: 'add', scale: 'large', iconAlign: 'bottom' }] ); } renderButtons('Normal Buttons'); ButtonPanel.override({ enableToggle: true }); renderButtons('Toggle Buttons'); ButtonPanel.override({ enableToggle : undefined, menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]} }); renderButtons('Menu Buttons'); ButtonPanel.override({ split: true, defaultType: 'splitbutton' }); renderButtons('Split Buttons'); ButtonPanel.override({ split: false, defaultType: 'button', arrowAlign: 'bottom' }); renderButtons('Menu Buttons (Arrow on bottom)'); ButtonPanel.override({ split: true, defaultType: 'splitbutton' }); renderButtons('Split Buttons (Arrow on bottom)'); }); // Helper class for organizing the buttons ButtonPanel = Ext.extend(Ext.Panel, { layout:'table', defaultType: 'button', baseCls: 'x-plain', cls: 'btn-panel', renderTo : 'docbody', menu: undefined, split: false, layoutConfig: { columns:3 }, constructor: function(desc, buttons){ // apply test configs for(var i = 0, b; b = buttons[i]; i++){ b.menu = this.menu; b.enableToggle = this.enableToggle; b.split = this.split; b.arrowAlign = this.arrowAlign; } var items = [{ xtype: 'box', autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"}, colspan: 3 }].concat(buttons); ButtonPanel.superclass.constructor.call(this, { items: items }); } });

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值