将多个checkbox添加进一个list中，设置监听，当有一个checkbox被选中时，循环list ,将其他checkbox的选中状态设置为false:


</pre><pre name="code" class="java" style="font-size:18px;">		private List<CheckBox> boxList;
		private CheckBox groupBox;
		private CheckBox sortBox;
		private CheckBox nearBox;
		private CheckBox selectBox;
		groupBox = (CheckBox) mView.findViewById(R.id.fragment_shop_group);
		sortBox = (CheckBox) mView.findViewById(R.id.fragment_shop_sort);
		nearBox = (CheckBox) mView.findViewById(R.id.fragment_shop_near);
		selectBox = (CheckBox) mView.findViewById(R.id.fragment_shop_select);

		boxList = new ArrayList<CheckBox>();
		boxList.add(groupBox);
		boxList.add(sortBox);
		boxList.add(nearBox);
		boxList.add(selectBox);
		for (int i = 0; i < boxList.size(); i++) {
			boxList.get(i).setOnCheckedChangeListener(this);
		}
		
		@Override
		public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
			if (isChecked) {
				for (int j = 0; j < boxList.size(); j++) {
					boxList.get(j).setChecked(false);
				}
				buttonView.setChecked(isChecked);
			}
		}

别忘了要实现这个接口 implements OnCheckedChangeListener

<div class="chc">
    <input type="checkbox" name="checkName" th:id="'check'+${u.vipCode}">
    <a href="#"><label th:for="'check'+${u.vipCode}"></label></a>
</div>

在label标签外面加上一个<a>标签可以显著提高多个checkbox动态渲染时的效率和性能，当然不建议在一个页面中同时显示过多的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().parent().parent().find("#sprice").html());
            	var scount = parseFloat($(this).parent().parent().parent().find("#num").html());
            	totalprice += sprice;
            	totalcount += scount;
            } 
		});
		// (5)
		$("#sl").html(totalcount);
		$("#allPrice").html(totalprice);
		// (6)
		/*var keyArray = new Array();
		keyArray.push({totalprice:totalprice},{totalcount:totalcount});
		return keyArray;*/
	}

代码分析：

（1）通过$("input[type='checkbox']")获取所有的checkbox元素。
（2）利用$(selector).each(function(){})对获取的checkbox数组进行循环
（3）判断当前checkbox是否被选中以及是否是全选按钮，这里使用hasClass("checkAll")，是用来区分我的全选按钮与商品按钮。
（4）$(this).parent()这里是获取当前元素的父元素，因为我们知道，页面的布局往往是由很多层嵌套的。为了获取同条商品中的其他值如：小计、数量等。当我们获取到最顶层的父元素时，我们在通过$(this).parent().find()方法直接定位到所要获取的元素那里，你们可以看到为了获取父元素我用了多少parent()。期间你可以同过$(selector).attr("class")来查看他的class属性或者其他属性以判别是否到了顶层父元素。

看如下代码，截取自我的项目中：（主要是看重点（1）（2）（3）有标记！！！）

<div class="th" id="">
	<div class="pro clearfix">
		<label class="fl" style="border: 1px solid darkgrey"> 
			// 单选框：即没个商品前面的单选框  重点（1）
			<input type="checkbox" class="checkbox" onclick="check(this,${car})" id="check" /> <span></span>
		</label>
		<a class="fl" href="">
			<dl class="clearfix">
				<dt class="fl">
					<img style="width: 120px; height: 120px;"
					src="${path}img/${car.mc.mcphoto }"/>
				</dt>
				<dd class="fl">
					<p>${car.mc.mcname }</p>
				</dd>
			</dl>
		</a>
	</div>
	<div class="price">￥${car.mc.mcprice }</div>
	<div class="number">
		<p class="num clearfix">
			// 商品数量前的减号，通过图片、jq点击事件、ajax完成数量实时减少
			<img class="fl sub" style="cursor:pointer;" src="${path}img/temp/sub.jpg">
				<span id="myid" style="display:none" >${car.mc.mcid }</span> 
				// 商品的数量  重点（2）
				<span id="num" class="fl myCount">${car.count }</span> 
			// 商品数量前的加号，通过图片、jq点击事件、ajax完成数量实时增加
			<img style="cursor:pointer;"  class="fl add" src="${path}img/temp/add.jpg">
		</p>
	</div>
	// 同一条商品栏中的商品小计   重点（3）
	<div class="price sAll">￥<a id="sprice">${car.count*car.mc.mcprice }</a></div>
	<div class="price">
		<a class="del" href="<%=request.getContextPath() %>/ShopController?action=delete&mcid=${car.mc.mcid }">删除</a>
	</div>
</div>


（5）通过$(selector).html()来过去他的文本值，用于处理这里我们还用了parseInt()将文本值转换成int型数据以便他可以进行计算。
（6）这里被注释掉的方法主要是用来解决当你的function函数需要return多个值时，你可以选择这样直接return keyArry;返回一个键值对数组。

var keyArray = new Array();
keyArray.push({totalPrice:""},{totalCount:""});

使用多个CheckBox进行联动时，应该使用setOnClickListener替代OnCheckedChangeListener

以下是错误代码（正确代码在文末）：

private void initCheckBox(final List<CheckBox> checkBoxList, final CheckBox checkBoxAll) {
        // 初始化 各个 子的 ChechBox
   for (CheckBox checkBox : checkBoxList) { 
            checkBox.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    boolean isAllSelect = true; // 假设全部都已经被选中了
                    for (CheckBox checkBox : checkBoxList) { // checkBoxList_First
                        if (!checkBox.isChecked()) { // 只要有一个没被选中 ，就说明不是全部被选中，如果遍历完之后还没有找到，那么就设置为true
                            isAllSelect = false;
                            break;
                        }
                    }
                    checkBoxAll.setChecked(isAllSelect); 
                }
            });
        }

  checkBoxAll.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
           public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                   for (CheckBox checkBox : checkBoxList) {
                        checkBox.setChecked(true);
                   }
               } else {

                    for (CheckBox checkBox : checkBoxList) {
                        checkBox.setChecked(false);
                    }
                }
            }
});
       
}

这样的代码，乍一看，感觉没什么毛病，不过就是点击全选的时候，则所有的子CheckBox都选中；当所有的子CheckBox都选中时，checkBoxAll选中状态为true，否则，checkBoxAll选中状态为false。但是运行在项目的时候，会发现，当所有的子CheckBox都选中了，虽然此时，checkBoxAll也显示为选中状态，但是当对其中一个子CheckBox取消选中时，所有的子CheckBox都被取消选中了。

经过查看CheckBox的源码，发现，当CheckBox执行setChecked时，会触发执行OnCheckedChangeListener，所以，当所有的子CheckBox都选中后取消其中一个，会执行checkBoxAll.setChecked(false)，而此时，会执行checkBoxAll的OnCheckedChangeListener，执行后，则将所有的子CheckBox都变成了取消状态。

    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mCheckedFromResource = false;
            mChecked = checked;
            refreshDrawableState();
            notifyViewAccessibilityStateChangedIfNeeded(
                    AccessibilityEvent.CONTENT_CHANGE_TYPE_UNDEFINED);

            // Avoid infinite recursions if setChecked() is called from a listener
            if (mBroadcasting) {
                return;
            }

            mBroadcasting = true;
            if (mOnCheckedChangeListener != null) {
                mOnCheckedChangeListener.onCheckedChanged(this, mChecked);
            }
            if (mOnCheckedChangeWidgetListener != null) {
                mOnCheckedChangeWidgetListener.onCheckedChanged(this, mChecked);
            }
            final AutofillManager afm = mContext.getSystemService(AutofillManager.class);
            if (afm != null) {
                afm.notifyValueChanged(this);
            }

            mBroadcasting = false;
        }
    }

这里，考虑使用setOnClickListener来替代setOnCheckedChangeListener，因为setCheck虽然会触发OnCheckedChangeListener，但是不会触发OnClickListener。

所以将checkBoxAll的初始化代码改为以下代码：

  checkBoxAll.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!checkBoxAll.isChecked()) { // 未选中时，则选中
                    checkBoxAll.setChecked(true);
                    for (CheckBox checkBox : checkBoxList) {
                        checkBox.setChecked(true);
                    }
                } else { // 选中时，则设置为未选中
                    checkBoxAll.setChecked(false);
                    for (CheckBox checkBox : checkBoxList) { 
                        checkBox.setChecked(false);
                    }
                }
            }
        });

这样，看起来也一样没毛病，完全符合逻辑。但是，当点击checkBoxAll时，会出现checkBoxAll的选中状态一闪而过。

但是，经验证，当CheckBox被点击的时候，setOnCheckedChangeListener会比setOnClickListener先执行，即当手指点击的时候，此时，若原本checkBoxAll是true状态，先执行了setOnCheckedChangeListener，则变成false，而setOnClickListener中的代码后执行，又被设置为true，所以就出现了一闪而过的现象。



   

好了，说了这么多，最终代码应该为（子CheckBox的OnCheckedChangeListener也可以使用setOnClickListener去处理）：

 private void initCheckBox(final List<CheckBox> checkBoxList, final CheckBox checkBoxAll) {
       // 初始化 各个 子的 ChechBox
     for (CheckBox checkBox : checkBoxList) {
          
checkBox.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {
                @Override
         public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    boolean isAllSelect = true; // 假设全部都已经被选中了
                    for (CheckBox checkBox : checkBoxList) { 
                        if (!checkBox.isChecked()) { // 只要有一个没被选中 ，就说明 不是全部被选中，如果遍历完之后还没有找到，那么就设置为true
                            isAllSelect = false;
                            break;
                        }
                    }
                    checkBoxAll.setChecked(isAllSelect);
                }
            });
        }
      
        checkBoxAll.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
             
                if (checkBoxAll.isChecked()) {
                    checkBoxAll.setChecked(true);
                    for (CheckBox checkBox : checkBoxList) {
                        checkBox.setChecked(true);
                    }
                } else {
                    checkBoxAll.setChecked(false);
                    for (CheckBox checkBox : checkBoxList) {
                        checkBox.setChecked(false);
                    }
                }
            }
        });
    }

以上是我的个人理解，如果有错误的地方，请帮忙指正，谢谢！