关于仿智联招聘的多选页面效果的实现jquery

一.如果在前台页面使用的是<div id="selectSub"><input type="checkbox" name="checks"></div>

 

          var items = $("selectSub").getElementsByTagName("input");

 

          for(var j=0;j<items.length;j++)            {                 if(items[j].checked)                 {                         var mes+= items[j].value+',';                  }             }

          mes=mes.substring(0,mes.length-1);  //输出所有的checkbox的value值

 

二.如果在前台页面使用的是<asp:CheckBoxList ID="listTest" runat="server"></asp:CheckBoxList>

 

          请注意，如果是用jquery，那么在前台浏览生成页面的源文件的时候不难发现，每一个input并不存在value值，这时需要在后台绑定checkboxlist的同时，写上这样的语句，硬性地给附上value值，即：

 

          foreach (ListItem li in listTest.Items)           {                 li.Attributes.Add("alt", li.Value);           }

 

          前台页面再写上如下代码即可实现：

          var valuelist = ""; //保存checkbox选中值             //遍历name以listTest开头的checkbox             for(i=0;i<listTest.rows.length;i++)             {             $("input[name='listTest$"+i+"']").each(function() {                 if (this.checked) {                 //$(this):当前checkbox对象;                 //$(this).parent("span"):checkbox父级span对象                 valuelist += $("input[name='listTest$"+i+"']").parent("span").attr("alt") + ",";             }             });             }             if (valuelist.length > 0) {                 //得到选中的checkbox值序列,结果为400,398                 valuelist = valuelist.substring(0, valuelist.length - 1);                 alert(valuelist);             }

 

        另外，如果前台页面是<asp:CheckBoxList ID="tt" runat="server" RepeatColumns="4" RepeatLayout="table">，也可以通过javascript来获取checkboxlist的DataValueField值，即：

 

       function addPreItemTwo()         {             $("previewItem").innerHTML="";

            var lens=0;             var lenMaxs=4;

            var ss=$("tt");             for(var i=0;i<ss.rows.length;i++)             {                 for(var j=0;j<ss.rows[i].cells.length;j++)                 {                     if(ss.rows[i].cells[j].childNodes[0])                     {                         if(ss.rows[i].cells[j].childNodes[0].firstChild.checked)                         {                             lens++;                             if(lens>lenMaxs)                             {                                 alert("不能超过" + lenMaxs +"个选项！")                                 return false;                             }                             var mes+=ss.rows[i].cells[j].childNodes[0].innerText+',';                         }                     }                 }             }         }