JS实战 · 复选框全选操作

思路:

1、获取被选中checkbox,通过checked属性的状态完成;

2、获取被选中的checkbox的value值;

3、求所有value的和sum;

4、定义span区域存储和sum;

代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>表单组件:全选操作</title>

<script type="text/javascript">

function checkAll(index){

var node = document.getElementsByName("all")[index];

var items = document.getElementsByName("item");

for(var i=0; i<items.length; i++){

items[i].checked = node.checked;

}

}

</script>

</head>

<body>

<p></p>

<input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br/>

<input type="checkbox" name="item" value="100"/>商品1<br/>

<input type="checkbox" name="item" value="100"/>商品2<br/>

<input type="checkbox" name="item" value="100"/>商品3<br/>

<input type="checkbox" name="item" value="100"/>商品4<br/>

<input type="checkbox" name="item" value="100"/>商品5<br/>

<input type="checkbox" name="item" value="100"/>商品6<br/>

<input type="checkbox" name="all" onclick="checkAll(1)"/>全选

</body>

</html>

代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>购物车显示选中购买物品的总金额</title>

<script type="text/javascript">

function checkAll(index){

var node = document.getElementsByName("all")[index];

var items = document.getElementsByName("item");

for(var i=0; i<items.length; i++){

items[i].checked = node.checked;

}

}

function getSum(){

var items = document.getElementsByName("item");

var sum = 0;

for(var i=0; i<items.length; i++){

if(items[i].checked){

sum += parseInt(items[i].value);

}

}

/*获取单个节点用getElementById

获取节点数组用getElementsById

*/

var spanNode = document.getElementById("sum");

var str = sum + "元";

spanNode.innerHTML = str.fontsize(8);

}

</script>

</head>

<body>

<br/>

<input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br/>

<input type="checkbox" name="item" value="105"/>商品1<br/>

<input type="checkbox" name="item" value="214"/>商品2<br/>

<input type="checkbox" name="item" value="113"/>商品3<br/>

<input type="checkbox" name="item" value="77"/>商品4<br/>

<input type="checkbox" name="item" value="91"/>商品5<br/>

<input type="checkbox" name="item" value="536"/>商品6<br/>

<input type="checkbox" name="all" onclick="checkAll(1)"/>全选<br/>

<input type="button" value="显示总金额" onclick="getSum()"/><span id="sum"></span>

</body>

</html>

时间: 2024-08-26 08:12:23

JS实战 · 复选框全选操作的相关文章

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

checkbox全选/全不选,子复选框全选父复选框选中

<input type="checkbox" class="optionListAll">/* 父复选框 */ <input type="checkbox" name="optionList"> <input type="checkbox" name="optionList"> <input type="checkbox" n