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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
ajax与302响应代码测试
2013/10/23 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Python模拟随机游走图形效果示例
2018/02/06 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python 如何引入协程和原理分析
2020/11/30 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
小学生手册家长评语
2014/04/16 职场文书
关于工作经历的证明书
2014/10/11 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
办公用品质量保证书
2015/05/11 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android