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" οnclick="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" οnclick="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" οnclick="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" οnclick="checkAll(1)"/>全选<br/>
    <input type="button" value="显示总金额" οnclick="getSum()"/><span id="sum"></span>
</body>
</html>

转载于:https://www.cnblogs.com/panweiwei/p/6158710.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java二叉树删除子树_132-BST删除有一颗子树的结点

2.网上数据结构和算法的课程不少&#xff0c;但存在两个问题&#xff1a;1)授课方式单一&#xff0c;大多是照着代码念一遍&#xff0c;数据结构和算法本身就比较难理解&#xff0c;对基础好的学员来说&#xff0c;还好一点&#xff0c;对基础不好的学生来说&#xff0c;基本上…

使用djcproxy创建代理对象

在过去的几周中&#xff0c;我展示了如何使用Java Reflection API和cglib创建代理对象。 在本文中&#xff0c;我将向您展示如何使用djcproxy做到这一点。 哦&#xff0c;不是&#xff0c;另一个代理实现&#xff01; 除了我创建此代理的自私事实之外&#xff0c;还要写些什么…

lightoj1145 【DP优化求方案】

题意&#xff1a; 有一个k面的骰子&#xff0c;然后问你n个骰子朝上的面数字之和s的方案&#xff1b;思路&#xff1a;dp[i][j] 代表 前 i 个骰子组成 j 有多少种方案&#xff1b;显然dp[i][j] dp[i - 1][j - 1] dp[i - 1][j - 2] ... dp[i - 1][j - k];我们算 dp[i][j] 的…

java rx.observable_Rxjava2 Observable的条件操作符详解及实例

简要&#xff1a;需求了解&#xff1a;在使用 Rxjava 开发中&#xff0c;经常有一些各种条件的操作 &#xff0c;如比较两个 Observable 谁先发射了数据、跳过指定条件的 Observable 等一系列的条件操作需求&#xff0c;那么很幸运&#xff0c; Rxjava 中已经有了很多条件操作符…

Linux poll 和 select 机制

poll select 介绍 使用非阻塞 I/O 的应用程序常常使用 poll, select, 和 epoll 系统调用. poll, select 和 epoll 本质上有相同的功能: 每个允许一个进程来决定它是否可读或者写一个 或多个文件而不阻塞. 这些调用也可阻塞进程直到任何一个给定集合的文件描述符可用来 读或写.…

hprof 不大 泄露_HPROF –内存泄漏分析教程

hprof 不大 泄露本文将为您提供有关如何通过生成和分析Sun HotSpot JVM HPROF堆转储文件来分析JVM内存泄漏问题的教程。 一个现实的案例研究将用于此目的&#xff1a;Weblogic 9.2内存泄漏影响Weblogic Admin服务器。 环境规格 Java EE服务器&#xff1a;Oracle Weblogic Ser…

java枚举怎么编译不行的_java枚举类型

public classTestEnum {/*最普通的枚举*/public enumColorSelect {red, green, yellow, blue;}/*枚举也可以象一般的类一样添加方法和属性,你可以为它添加静态和非静态的属性或方法,这一切都象你在一般的类中做的那样.*/public enumSeason {//枚举列表必须写在最前面&#xff0…

eclipse光标变成黑块变粗解决办法

就是按下了键盘的insert按键转载于:https://www.cnblogs.com/panxuejun/p/6170717.html

投资银行对Java进行的二十大核心面试问答

这是在金融领域&#xff08;主要是大型投资银行&#xff09;共享Java核心访谈问题和答案的新系列。 在JP Morgan&#xff0c;Morgan Stanley&#xff0c;Barclays或Goldman Sachs上会问许多这些Java面试问题。 银行主要从多线程 &#xff0c; 集合 &#xff0c;序列化&#xff…

java 支付重复问题_Airbnb支付系统如何在分布式环境下避免重复打款

原文链接&#xff1a;https://medium.com/airbnb-engineering/avoiding-double-payments-in-a-distributed-payments-system-2981f6b070bbAirbnb一直在将其基础架构迁移到面向服务的体系结构(SOA)。 SOA具有许多优势&#xff0c;例如使开发人员能够专业化并具有更快迭代的能力。…

用注解方式写定时任务

spring里加上 </context:component-scan><!-- 任务自动扫描 --><task:annotation-driven/><!-- 扫描位置 --><context:annotation-config/> <context:component-scan base-package"com.xxx.xxx"/>然后在类上面添加注解 Compon…

myeclipse配置java8_MyEclipse 2017配置Tomcat8

MyEclipse 2017的配置其实跟MyEclipse 2015的比较一致&#xff0c;再往之前的就有出入了。不得不吐槽其卡&#xff0c;跟Eclipse不在一个量级上呀。。。一、配置转自&#xff1a;http://www.xuexila.com/diannao/diy/2788109.html工具/原料myeclipse 2017tomcat8 服务器方法/步…

moxy json介绍_MOXy作为您的JAX-RS JSON提供程序–服务器端

moxy json介绍在之前的系列文章中&#xff0c;我介绍了如何利用EclipseLink JAXB&#xff08;MOXy&#xff09;创建RESTful数据访问服务。 在本文中&#xff0c;我将介绍在服务器端利用MOXy的新JSON绑定添加对基于JAXB映射的JSON消息的支持有多么容易。 MOXy作为您的JAX-RS JSO…

mysql教程清华课后答案_mysql学习之路_sql

查看数据库&#xff1a;Show databases;查看指定部分数据库&#xff1a;模糊查询Show databases like ‘patten’;--paatten是匹配模式%&#xff1a;表示是匹配模式_&#xff1a;表示匹配单个字符&#xff1b;查看数据库创建语句&#xff1a;Show create database 数据库名[库选…

那么您想做微服务吗? 请观看微服务以防万一

Bert Ertman在本次有关微服务的演示中提供了许多有效的观点。 您是否正在考虑在项目&#xff0c;团队或公司中遵循此路径&#xff1f; 请拿起咖啡&#xff0c;记事本&#xff08;如果您喜欢手写笔记&#xff09;并观看。 看到许多公司和团队确实很痛苦&#xff0c;精力浪费&…

MDX中Filter 与Exist的区别

获得一个集合&#xff0c;这个一般用来筛选出一个自定义的set&#xff0c;比如在中国的餐厅 该set返回所有MSDNteam下并且在Fact Thread度量上有记录的products 用Exists实现 select Exists( [Dim Queue].[Product - Queue].MEMBERS, [Dim Engineer].[Team - Engineer].[Team N…

java chsftp.get 追加_Java SFTP上传使用JSch,但如何覆盖当前文件?

我试图使用JSch将两个文件上传到具有SFTP的服务器.如果目录为空,则上传文件可以正常工作,但我想一遍又一遍地上传相同的文件(只需更改内部的id),但是我无法弄清楚如何做到这一点. JSch中有一些静态参数叫做OVERWRITE,但是我无法找到如何使用它.任何人都关心我如何添加这个设置&…

MySQL在Django框架下的基本操作(MySQL在Linux下配置)

注&#xff1a;本文已迁移至CSDN&#xff0c;后续的更新也会在CSDN。 http://blog.csdn.net/houchaoqun_xmu/article/details/53813633 http://blog.csdn.net/houchaoqun_xmu 【原】本文根据实际操作主要介绍了Django框架下MySQL的一些常用操作&#xff0c;核心内容如下&#x…

Clean Sheet – Windows 10的人体工程学Eclipse主题

Clean Sheet是适用于Windows 10的符合人体工程学的Eclipse主题。它基于干净&#xff0c;低眩光的外观和感觉&#xff0c;旨在减轻视觉疲劳和眼睛疲劳。 它融合了均衡的颜色选择&#xff0c;可以突出谐波语法并注重可读性。 除自定义滚动条外&#xff0c;它还努力满足现代美学要…

php mysql插入的数据有引号_php – 由于’引号’的不同,数据没有插入到mysql数据库中...

您不需要在查询中封装表,除非它们有空格或者它们是保留字.INSERT INTO lms.test2 (trn) VALUES (17)// This makes no real sense to the db. It should be:INSERT INTO lms.test2 (trn) VALUES (17)如果列trn接受数字,它应该是&#xff1a;INSERT INTO lms.test2 (trn) VALUES…