[WEB前端开发]-复选框操作经验-解决无法获取所有选中值的问题

开发工作中遇到的复选框问题

参考案例

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。
http://www.helloweba.com/view-blog-254.html

代码修改原因

在获取复选框的值时，没有像原著一样可以获取到所有选中的值，很奇怪，所以做了一点修改。

VM代码

<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"> 

JS代码，参考原著

//做了一点修改，在获取复选框选中值时一直无法获取到正确的选中值，所以在点击复选框时加入了事件去修改复选框的值    //设置全选复选框     $("#list :checkbox").click(function(){         if(this.checked){                 $(this).attr("checked", true);           }else{                 $(this).attr("checked", false);         }          //原著是只有这个函数        allchk();     }); //获取复选框的值    $("#btnSave").click(function(){         var valArr = new Array;         $("#list :checkbox[checked]").each(function(i){             valArr[i] = $(this).val();         });         var vals = valArr.join(',');         alert(vals);//      if(!$("#detailInfoForm").valid()) return false;//      var val = ebcForm.formParams($("#detailInfoForm"));        eDialog.confirm("您确认要保存该店铺物流信息吗？", {            buttons : [{                caption : '确认',                callback : function(){                    eDialog.alert('success','保存成功！');                    $.eAjax({                        url : GLOBAL.WEBROOT + "/shop/saveexpress",                        data : {'shopId':_param.shopId,'shopName':_param.shopName,'expressIds':vals},                        datatype:'json',                        success : function(returnInfo) {                            eDialog.success('编辑成功！',{                                buttons:[{                                    caption:"确定",                                    callback:function(){                                        bDialog.closeCurrent();                                    }                                }]                            });                         }                    });                }            },{                caption : '取消',                callback : $.noop            }]        });    });

总结

加上复选框点击时产生事件去改变复选框的值后，就可以正常获取到复选框的值，但是原著里面并没有这么做也可以获取到所有值，百思不得其解。希望有答案者可以给我留言