html中的简单实例演示（checkbox）的使用

最新推荐文章于 2024-06-12 10:36:38 发布

learning_code_blog

最新推荐文章于 2024-06-12 10:36:38 发布

阅读量3.1w

点赞数 2

分类专栏： javascript JavaScript实例 Java学习之路文章标签： html JavaScript

本文链接：https://blog.csdn.net/yangxin_blog/article/details/49159051

版权

Java学习之路同时被 3 个专栏收录

47 篇文章 3 订阅

订阅专栏

javascript

14 篇文章 0 订阅

订阅专栏

JavaScript实例

14 篇文章 1 订阅

订阅专栏

演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。

1，首先显示出相应的界面：

相关代码：

<body>
   		商品列表：<br/>
		笔记本电脑<input type="checkbox" name="mm" value="3000" οnclick="chose(this)" />3000  
		台式机<input type="checkbox" οnclick="chose(this)" name="mm" value="2900"/> 2900  
		路由器<input type="checkbox" οnclick="chose(this)" name="mm" value="90"/> 90
		<br/>
		家常用品<input type="checkbox" οnclick="chose(this)" name="mm" value="500"/>500  
		洗衣机<input type="checkbox" οnclick="chose(this)" name="mm" value="5600"/> 5600
		<br/>全选<input type="checkbox"  name="all" οnclick="allCheck(this)"  />
  		<br/><input type="button" value="查看金额" name="btn" οnclick="sumall()"/> <span id="spanid"></span>
 		
  </body>

注意：在checkbox中，要是属于同一组的，在复选框的属性内name="mm"属性要写一样；到时候方便遍历所选项；在radio中，name="mm"也要设置一样，便于属于同一组相互区分。

2，全选按钮的设置

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

总结：

1，这个主要就是说，复选框的应用，选中复选框之后，如何获取相应的内容
2，要是属于同一组的，在复选框的属性内name="mm"属性要写一致；
var names=document.getElementsByName("mm");可以通过这个获得，是否选中，调用value进行操作checked 设置或获取复选框或单选钮的状态。然后一一加起来
3，全选的设置。同样的，通过document.getElementsByName获得对象数组，然后一一付给true
当一个没有选中的时候，我们就把全选按钮设置checked=false; 采用标记来区别，要是标记没有变化，就说明没有一个没选，否则要把全选的按钮设置成选中状态。

learning_code_blog

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
html中的简单实例演示（checkbox）的使用

演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。1，首先显示出相应的界面：相关代码：商品列表：笔记本电脑3000 台式机 2900 路由器 90 家常用品500 洗衣机 5600 全选注意：在checkbox中，要是属于同一组的，在复选框的属性内name="
复制链接

扫一扫

专栏目录