html 复选框全选、反选操作
1、效果图
2、代码
<html><head><title>html复选框全选、反选操作</title><style>div.chooseClass{display:inline-block;width:100px;} </style></head><script type="text/javascript" src="/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script> <!-- 引入百度在线jquery --><body><div style="margin:20px"><div id="content"><!-- 元素 --></div><br/><input type="checkbox" onclick="choose(this,1)"/>全选/全不选 <input type="checkbox" onclick="choose(this,2)"/>反选<br/></div></body></html><script>$(function(){addOption(); //遍历要操作的元素});//全(不)选，反选方法function choose(obj, type) {if(type == 1){if ($(obj).is(":checked")) { // 全选$("[name=fruit]:checkbox").prop("checked", true);getValue(); //得到选中的值} else {$("[name=fruit]:checkbox").prop("checked", false);getValue(); //得到选中的值}}//反选if( type == 2 ){$("[name=fruit]:checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));});getValue(); //得到选中的值}}//遍历要操作的元素function addOption(){var option = ["苹果","杏子","海棠果","酸橙","板栗","樱桃","椰子","山核桃","金桔","砀山梨"];var html = '';var j = 0;for(var i=0;i<option.length;i++){var isBr = '';j++;if(j%3==0){isBr = '<br>';}html += '<div class="chooseClass"><input type="checkbox" name="fruit" value="'+option[i]+'"/>'+option[i]+'</div>' + isBr;}//把选项添加进div中$("#content").append(html);}//得到选中的值function getValue(){var optionArr =[];//定义一个多选数组 $('input[name="fruit"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数 optionArr.push($(this).val());//将选中的值添加到数组chk_value中 });alert('选中的值是:'+optionArr);}</script>
