`

js中button事件的简单示例

    博客分类：
  • ajax
JavaScriptXHTMLHTML 
阅读更多
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>

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

分享到：
| Eclipse Java EE IDE for Web Developers安 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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，主要用于创建具有丰富用户体验的...

    AJAX简单示例

    5. JavaScript与AJAX：在示例中，JavaScript将负责处理AJAX请求的发起、接收响应和更新页面。这通常涉及到XMLHttpRequest对象的open()、send()方法，以及onreadystatechange事件的处理。 6. 数据格式：虽然AJAX名称...

Magicbox
Global site tag (gtag.js) - Google Analytics