Jquery实现处理多个checkbox单选框

Jquery实现处理多个checkbox单选框

---

问题描述

有些时候我们需要利用function函数来处理多个checkbox以便显示在网页中。以下是我在做项目的时候遇到遇到的情况：

我在页面中写了一个函数用于计算选中商品的总价格和总数量，但该如何有选择的计算值然后显示于页面上呢？

解决思路

这里我们需要用到以下的几个方法：

• $("input[type='checkbox']")：这是通过jq的元素选择器来获取所有的checkbox类型的input标签。
• $(selector).each(function(){})：jq的.each(function(){ })方法为每个匹配元素规定要运行的函数。
• $(this).hasClass()：.hasClass() 方法检查被选元素是否包含指定的类名称。如果被选元素包含指定的类，该方法返回 “true”。
• $(this).parent()：.parent()方法获取当前元素的父元素
• $(this).parent().find()：.find()方法是用来寻找符合条件的元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• $(selector).html()：.html()方法用来获取/设置当前便签的文本值。
  通过这些方法，我们可以遍历出checkbox这个数组的所有被选中的项，然后处理这些选项，并通过html修改页面的显示值。

实现代码

这里我将摆出我项目中处理这个问题的function函数：

function zg() {
   
		var totalprice = 0;
		var totalcount = 0;
		// (1)                       (2)
		$("input[type='checkbox']").each(function(){
     
			// (3)
            if(this.checked == true && !$(this).hasClass("checkAll")){
   
            	// 获取选中项小计的数字
            	// (4)
            	var sprice = parseFloat($(this).parent(