`

js中button事件的简单示例

    博客分类:
  • ajax
阅读更多
Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  6. <scripttype="text/javascript">
  7. window.onload=function(){//页面所有元素加载完毕
  8. varbtn=document.getElementById("btn");//获取id为btn的元素(button)
  9. btn.onclick=function(){//给元素添加onclick事件
  10. vararrays=newArray();//创建一个数组对象
  11. varitems=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. <formmethod="post"action="#">
  24. <inputtype="checkbox"value="1"name="check"checked="checked"/>
  25. <inputtype="checkbox"value="2"name="check"/>
  26. <inputtype="checkbox"value="3"name="check"checked="checked"/>
  27. <inputtype="button"value="你选中的个数"id="btn"/>
  28. </form>
  29. </body>
  30. </html>

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

分享到:
评论

相关推荐

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    在JavaScript中,事件(Events)是用户或浏览器与页面交互时触发的特定动作,比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...

    javascript 禁用button 10秒钟

    在探讨“javascript禁用button 10秒钟”的技术细节前,我们先理解这一需求的核心——在用户界面上,为了防止用户连续点击按钮导致不必要的请求或操作,或是为了确保用户有足够的时间阅读某些重要信息(如服务条款)...

    JavaScript事件冒泡示例.html

    JavaScript事件冒泡是Web开发中的一个关键概念,它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式,当一个事件(如点击、鼠标移动等)在一个元素上触发时,该事件会自底向上沿着DOM树...

    VS ASP.NET中的button点击触发事件

    在ASP.NET开发环境中,Visual Studio (VS) 提供了丰富的功能来处理用户交互,特别是针对按钮(Button)的点击事件。按钮点击事件分为两种主要类型:客户端点击事件和服务器端点击事件,这两种事件都可以用于不同的...

    Ext2_Button示例

    在本示例“Ext2_Button”中,我们将聚焦于ExtJS 2.x版本中的按钮(Button)组件,它是ExtJS用户界面中的一个重要元素。 按钮组件在ExtJS中扮演着各种角色,如触发事件、导航、提交表单等。让我们深入了解一下ExtJS ...

    JS中touchstart事件与click事件冲突的解决方法.docx

    在JavaScript中,`touchstart`事件和`click`事件在移动设备上可能存在冲突,这个问题主要出现在需要同时兼容PC和移动设备的Web应用中。在移动设备上,由于触摸屏的操作特性,`touchstart`事件在用户手指触碰屏幕时...

    Qt6 QML Book/JavaScript/创建JS控制台示例源码

    在本文中,我们将深入探讨如何在Qt6 QML中创建一个JavaScript控制台示例,以及相关的编程技术。QML(Query Markup Language)是Qt框架的一部分,用于构建用户界面,而JavaScript则是QML中的主要脚本语言,用于实现...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡,并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中,阻止事件冒泡可以通过以下两种方式...

    .net websocket简单示例

    下面将详细介绍.NET中的WebSocket实现以及在给定的示例中需要注意的关键点。 首先,让我们从服务端开始。在.NET控制台程序中,我们可以创建一个WebSocket服务器,监听特定端口并处理连接请求。以下是一个简单的...

    简单的JS网页换肤示例

    在这个示例中,我们可能有一个包含不同皮肤样式的CSS文件集,每个文件对应一种独特的设计主题。 1. **HTML结构**:网页的基础结构应包含用于切换样式的元素,如按钮或下拉菜单。这些元素通常会触发JavaScript事件,...

    .net下最简单的ajax示例

    在这个.NET AJAX示例中,我们有两个主要文件:AjaxTest.aspx和AjaxTest.aspx.cs。前者是ASP.NET的网页文件,后者是对应的C#后台代码文件。 1. **AjaxTest.aspx**: 这个文件通常包含HTML标记和嵌入的脚本,用于...

    这个示例用于演示button的用法,通过value变量实现了按钮放大,缩小

    在这个示例中,`changeably_button`可能是一个包含HTML、CSS和JavaScript文件的目录,用于展示这个动态按钮效果。HTML文件会定义按钮元素并关联JavaScript脚本;CSS文件则负责初始化按钮的基本样式;JavaScript文件...

    js禁止页面使用右键(简单示例代码).docx

    ### JS禁止页面使用右键(简单示例代码) 在网页开发过程中,有时为了保护网站上的内容不被轻易复制或者出于用户体验的考虑,开发者可能会选择禁止用户在页面上使用右键。这种做法虽然不能完全阻止技术手段较高的...

    ajax 简单示例

    在这个“ajax 简单示例”中,我们将探讨如何手写Ajax代码,以及如何在Java后端如Struts框架中配合使用。 首先,让我们看看**手写Ajax代码**的基本结构。通常,一个简单的Ajax请求由以下几个部分组成: 1. **创建...

    html+js+css基础框架代码示例 创建一个简单的待办事项应用

    这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的待办事项(To-Do List)应用。该应用程序允许用户添加、标记完成和删除待办事项。通过这个示例,你可以了解HTML结构、CSS 代码解析 1. HTML部分: input...

    Vue 实例事件简单示例

    在示例中,我们创建了一个名为`app`的Vue实例,通过`el`属性将其挂载到`#app`的DOM元素上。在实例的数据对象中,有一个名为`num`的属性,用于存储计数器的值。 ```javascript var app = new Vue({ el: '#app', ...

    js简单实现同一html中判断哪个按钮被按下

    在这个改进版的示例中,我们使用`querySelectorAll`选择所有`&lt;button&gt;`元素,并通过`forEach`遍历它们。每个按钮的点击事件处理程序都会弹出一个警告框,显示按钮的序号。 总结来说,通过JavaScript,我们可以轻松...

    代码示例代码示例

    JavaScript(简称JS)是一种轻量级的解释型编程...以上只是JS编程中的一部分关键知识点,JS还有模块系统、事件驱动、错误处理、正则表达式等多个方面,通过不断学习和实践JS代码示例,可以逐步掌握这门强大的脚本语言。

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    此外,为了更好地理解和使用JavaScript事件,你可以参考这个在线查询工具:[javascript事件与功能说明大全](http://tools.jb51.net/table/javascript_event),它汇总了JS常用的事件类型和函数功能,对开发者来说是个...

    flex与JS交互示例

    在本示例中,我们将深入探讨如何实现这种交互,并通过具体的步骤来理解其工作原理。 首先,Flex是一个开源的富互联网应用程序(RIA)框架,它基于ActionScript编程语言和Flex SDK,主要用于创建具有丰富用户体验的...

Global site tag (gtag.js) - Google Analytics