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


Posted in Javascript onNovember 17, 2015

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

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

相关代码:

<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、全选按钮的设置

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

相关代码:

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"); 
     
   }

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

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

2).要是属于同一组的,在复选框的属性内name="mm"属性要写一致;

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

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

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

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

Javascript 相关文章推荐
ajax中get和post的说明及使用与区别
Dec 23 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 #Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
jquery可定制的在线UEditor编辑器
Nov 17 #Javascript
JS实现选项卡实例详解
Nov 17 #Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 #Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 #Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
You might like
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
vue中使用echarts的示例
2021/01/03 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python for i in range ()用法详解
2020/09/18 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python底层封装实现方法详解
2020/01/22 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python处理写入数据代码讲解
2020/10/22 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
项目开发计划书
2014/01/09 职场文书
竞聘书格式及范文
2014/03/31 职场文书
生日宴会策划方案
2014/06/03 职场文书
供用电专业求职信
2014/07/07 职场文书
三好生演讲稿
2014/09/12 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫