`

javascript计算复选框选中个数

 
阅读更多 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn">

<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		var arrays = new Array();
		var items = document.getElementsByName("check");
		for(i=0; i<items.length; i++){
			if(items[i].checked){
				arrays.push(items[i].value);
			}
		}
		alert("选中的个数为：" + arrays.length);
	}
</script>
</body>
</html>
分享到：
| css隔行变色
评论
发表评论

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

相关推荐

    JS实现选中一级复选框相关二级或父级同时被选

    "JS实现选中一级复选框相关二级或父级同时被选"这个功能就是一种典型的树形结构数据的复选框关联逻辑，它涉及到JavaScript编程和DOM操作。 首先，我们需要理解这个功能的基本需求：当用户选中一级复选框时，其相关...

    带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选

    下面将详细讲解这个主题，包括复选框、多级目录树以及全选和反选的实现原理。 1. **复选框（Checkbox）**： 复选框是用户界面中常用的一种控件，它允许用户在多个选项中进行多选。在HTML中，`...

    JSP(JAVASCRIPT)带复选框的树

    当我们提到"JSP(JAVASCRIPT)带复选框的树"时，我们谈论的是在一个网页中构建一种可视化结构，即树形控件，该控件具有可勾选的节点，用户可以选择或取消选择这些节点。这种功能在数据层级关系展示和多选操作中非常...

    jquery复选框全选操作

    这段代码首先计算当前选中的子复选框数量，如果等于所有子复选框的数量，说明所有都被选中，此时全选复选框应被选中；否则，全选复选框应取消选中。 以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目...

    树形复选框(Checkbox)

    3. **状态管理**：JavaScript可以维护选中数，每当复选框状态改变时，计算当前选中的节点数量，并在适当的位置显示。 4. **展开与收缩**：实现展缩功能通常需要一个额外的标志（如“展开”或“折叠”图标），点击该...

    jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计

    这个文件可能包含了各种函数和事件处理程序，用于处理复选框的选中状态、购物车的计算以及页面的交互。 总结起来，这个项目展示了如何利用jQuery来增强复选框的交互性，实现全选、反选、取消选择的功能，并结合...

    树结构 复选框 多选 全选功能

    当用户点击一个节点的复选框时，我们需要根据当前选择策略（是否允许部分选中、是否必须全选子节点等）来更新选中集合。 在实际开发中，实现这些功能通常需要以下步骤： 1. 渲染树结构：根据数据生成HTML结构，为每...

    带有复选框的JS树状菜单

    "带有复选框的JS树状菜单"是一个常见的需求，它允许用户通过视觉层次结构来组织和选择数据。这种类型的菜单常用于文件管理器、设置面板或权限配置等场景。下面将详细介绍这个主题涉及的关键知识点。 首先，我们需要...

    js复选框（checkbox）

    4. **根据选中个数更新全选框状态**： 为了使全选按钮的状态反映当前选中项的数量，可以计算已选中的复选框数量，并与总数量比较： ```javascript const countChecked = () =&gt; checkboxes.filter(checkbox =&gt; ...

    dtree 带复选框

    在源码实现上，"dtree 带复选框"可能采用了JavaScript或者相关的前端框架（如React、Vue或Angular）来构建。它可能包括以下几个核心部分： 1. **数据模型**：定义树结构的数据对象，通常包括节点ID、文本、子节点...

    多个复选框特效.zip

    "多个复选框特效.zip" 文件很可能包含了一组用JavaScript实现的复选框交互效果，这些效果可以增强用户体验，使网页变得更加动态和吸引人。下面将详细讨论复选框特效、JavaScript以及与之相关的知识点。 1. **复选框...

    JavaScript判断表单中多选框checkbox选中个数的方法

    本文将详细介绍如何使用JavaScript来判断表单中多选框checkbox的选中个数，并提供相关的遍历与判断技巧，供有兴趣的开发者参考和借鉴。 首先，我们要了解在HTML表单中，多选框是一组具有相同名称的复选框控件。当...

    vue基于element-ui的三级CheckBox复选框功能的实现代码.zip

    在实现三级复选框时，通常需要处理嵌套关系，即一个复选框的选择可能会影响其子复选框的状态。 首先，我们需要在 Vue 组件的模板中设置这些元素。例如： ```html 一级选项1"&gt; 一级选项2"&gt; 二级选项1-1"&gt; 二...

    JavaScript限定复选框的选择个数示例代码

    在JavaScript编程中，限制用户在一组复选框中选择的最大数量是一个常见的需求，尤其是在创建问卷、表单或者自定义选项时。本示例提供了一种方法来实现这一功能，允许用户在10个复选框中最多勾选3个。如果达到最大...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    点击全选复选框时，调用`checkAll`方法来更新购物车中每个商品的`isChecked`状态，同时也更新`selectedData`数组和`AllChecked`状态。 ```javascript methods: { checkAll() { let list = this.shoppingListData....

    jquery统计复选框选中示例

    在Web开发中，jQuery是一个非常流行的...总之，jQuery使得在JavaScript中处理复选框选中状态变得简单而直观。通过结合CSS选择器和jQuery提供的方法，我们可以轻松地获取和操作复选框的状态，实现各种交互功能。

    javascript实现复选框超过限制即弹出警告框的方法

    ### 复选框选中数量的计算 在函数内部，首先定义了一个变量`max`来存储复选框可以被选中的最大数量。然后通过三元运算符`? :`来判断每个复选框的选中状态，并将其转换为数字（选中为1，未选中为0），将这些数字累加...

    jQuery添加购物车复选框

    全选功能通常通过一个主复选框触发，选中它会使得所有商品复选框都被选中。使用`.prop('checked', true/false)`可以批量设置复选框的选中状态。同时，反选则是将所有选中状态反转。在jQuery中，可以结合`.each()`...

    带复选框checkbox的tree

    - 使用JavaScript的事件监听器，例如`addEventListener`，可以捕捉到用户对复选框的操作，然后根据需要更新其他相关复选框的状态。 - `change`事件用于监听复选框状态的变化，`click`事件可以用来处理节点的点击...

    jquery统计用户选中的复选框的个数

    2. 使用`.length`属性来计算选中的复选框个数。 3. 使用事件监听器来响应用户的点击动作。 4. 在事件处理函数中增加逻辑判断，以限制复选框的最大勾选数量。 5. 使用`alert()`函数与`return false;`来与用户交互，...

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