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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
VUE实现日历组件功能
Mar 13 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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/10/09 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
12步教你理解Python装饰器
2016/02/25 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python标记语句块使用方法总结
2019/08/05 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
承认错误的检讨书
2014/01/30 职场文书
《乡愁》教学反思
2014/02/18 职场文书
竞聘书格式及范文
2014/03/31 职场文书
环境日宣传活动总结
2014/07/09 职场文书
搞笑的获奖感言
2014/08/16 职场文书
简单租房协议书
2014/10/21 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS