标签：过程 btn nbsp sel 哈哈 www pre input code
jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li><li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li><li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li><li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li><li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li><li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li></ul><input type="checkbox" id="all"><input type="button" value="全选" class="btn" id="selectAll"><input type="button" value="全不选" class="btn" id="unSelect"><input type="button" value="反选" class="btn" id="reverse"><input type="button" value="获得选中的所有值" class="btn" id="getValue">
$(function () {//全选或全不选$("#all").click(function(){if(this.checked){$("#list :checkbox").attr("checked", true);}else{$("#list :checkbox").attr("checked", false);}});//全选$("#selectAll").click(function () {$("#list :checkbox,#all").attr("checked", true);});//全不选$("#unSelect").click(function () {$("#list :checkbox,#all").attr("checked", false);});//反选*****$("#reverse").click(function () {$("#list :checkbox").each(function () {$(this).attr("checked", !$(this).attr("checked"));});allchk();});//设置全选复选框$("#list :checkbox").click(function(){allchk();});//获取选中选项的值$("#getValue").click(function(){var valArr = new Array;$("#list :checkbox[checked]").each(function(i){valArr[i] = $(this).val();});var vals = valArr.join(‘,‘);alert(vals);});});function allchk(){var chknum = $("#list :checkbox").size();//选项总个数var chk = 0;$("#list :checkbox").each(function () {if($(this).attr("checked")==true){chk++;}});if(chknum==chk){//全选$("#all").attr("checked",true);}else{//不全选$("#all").attr("checked",false);}}
标签：过程 btn nbsp sel 哈哈 www pre input code
原文地址：http://www.cnblogs.com/mmyh/p/6066178.html
