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 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
Vue将页面导出为图片或者PDF
Aug 17 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
php-fpm中max_children的配置
2019/03/15 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
利用js对象弹出一个层
2008/03/26 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
浅述python中深浅拷贝原理
2018/09/18 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
企划经理的岗位职责
2013/11/17 职场文书
大学生毕业鉴定
2014/01/31 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
活动主持人开场白
2015/05/28 职场文书
培训讲师开场白
2015/06/01 职场文书
历史博物馆观后感
2015/06/05 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript