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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Vue2.0权限树组件实现代码
Aug 29 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vue mvvm数据响应实现
Nov 11 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初学入门
2006/11/19 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript 常用方法总结
2009/06/03 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2015年团支书工作总结
2015/04/03 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
React自定义hook的方法
2022/06/25 Javascript