javascript中checkbox使用方法简单实例演示

演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。
1、首先显示出相应的界面：

 

相关代码：

<body>
  商品列表：<br/>
  笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000
  台式机<input type="checkbox" onclick="chose(this)" name="mm" value="2900"/> 2900
  路由器<input type="checkbox" onclick="chose(this)" name="mm" value="90"/> 90
  <br/>
  家常用品<input type="checkbox" onclick="chose(this)" name="mm" value="500"/>500
  洗衣机<input type="checkbox" onclick="chose(this)" name="mm" value="5600"/> 5600
  <br/>全选<input type="checkbox" name="all" onclick="allCheck(this)" />
  <br/><input type="button" value="查看金额" name="btn" onclick="sumall()"/> <span id="spanid"></span> 

 </body>

注意：在checkbox中，要是属于同一组的，在复选框的属性内name="mm"属性要写一样；到时候方便遍历所选项；在radio中，name="mm"也要设置一样，便于属于同一组相互区分。
2、全选按钮的设置


相关代码：

function allCheck(node1){
    var node=document.getElementsByName("mm");
    for (var x = 0; x < node.length; x++) {
     node[x].checked=node1.checked;
    }
   }

附加：当调用全选<input type="checkbox" name="all" onclick="allCheck(this)" />里面的函数之后就会遍历所有name相同的对象，设置所有的复选框的状态为checked=true选中。
3、当所有的状态都选中全选自动选上
代码实现：

function chose(node){
    var flag=true;//用于遍历是否是全部变量设置
    var allM=document.getElementsByName("all")[0];
    var node=document.getElementsByName("mm");
    for (var x = 0; x < node.length; x++) {
     if(node[x].checked==false){//只要有一个没选中，就退出遍历，标记设置为false
      flag=false;
      break;
     }
    }
    if(flag){
     allM.checked=true;
    }else{
     allM.checked=false;
    }
   }

4、点击查看按钮之后调用函数 

function sumall(){
    var sum=0;
    var names=document.getElementsByName("mm");
    for(var x=0;x<names.length;x++){
     if(names[x].checked){//选中的全部加起来
      sum=sum+parseInt(names[x].value);//将选中的值解析出来
     }
    }
    document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red"); 

   }

 

总结：
1）.这个主要就是说，复选框的应用，选中复选框之后，如何获取相应的内容

2）.要是属于同一组的，在复选框的属性内name="mm"属性要写一致；

var names=document.getElementsByName("mm");可以通过这个获得，是否选中，调用value进行操作checked 设置或获取复选框或单选钮的状态。 然后一一 加起来

3）.全选的设置。同样的，通过document.getElementsByName获得对象数组，然后一一付给true

当一个没有选中的时候，我们就把全选按钮设置checked=false; 采用标记来区别，要是标记没有变化，就说明没有一个没选（这句话有些绕口，大家仔细琢磨琢磨）。

以上为大家详细介绍了javascript中checkbox使用方法，欢迎大家学习。

赞 (0)

相关推荐

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • javascript中checkbox使用方法实例演示

    javascript中checkbox使用方法实例演示

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: (1)全选 (2)部分选 (3)反选(全不选) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ht

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • javascript动态添加checkbox复选框的方法

    本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

  • 基于javascript实现checkbox复选框实例代码

    基于javascript实现checkbox复选框实例代码

    本文实例讲解了javascript实现checkbox复选框的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascr

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • js获取所有checkbox的值的简单实例

    例: <input type="checkbox" name="test" value="值1" />显示的内容 <input type="checkbox" name="test" value="值2" />显示的内容 <input type="checkbox" name="test" value="值3

  • javascript中checkbox使用方法简单实例演示

    javascript中checkbox使用方法简单实例演示

    演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格. 1.首先显示出相应的界面:   相关代码: <body> 商品列表:<br/> 笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 台式机<input type="checkbox

  • jquery中checkbox使用方法简单实例演示

    jquery中checkbox使用方法简单实例演示

    和大家分享一段基于jQuery实现checkbox列表全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者. 引入jquery库 <script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script> 构建HTML 一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,

  • 模拟javascript中的sort排序(简单实例)

    一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    目录 innerHTML innerHTML的写法 总结 innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法 innerHTML的写法 对于element,设置innerHTML指定的元素名称 element.innerHTML; 将指定元素的html代码分配给变量 var sample1 = element.innerHTML 用指定元素替换变量的值 通过如下编写,可以在删

  • javascript实现抽奖程序的简单实例

    昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,CTO现场review代码. 简单想了一下抽奖程序的实现,花了十几分钟写了一下,主要用到的知识有数组添加删除,以及ES5 数组新增的indexOf,filter方法, 为了刷新页面后仍能保存已中奖记录,用了localStorage存盘. 刚开始是用随机数直接取编号,发现要剔除已中奖的人很麻烦,如果重复要递归调用,如果中奖的人太多到最后随机数取到已中奖的人概率太大,所以换用两个数组实现,一个记录已中奖的号码,一个记录未

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • 如何判断Javascript对象是否存在的简单实例

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

随机推荐