jQuery獲取checkboxlist選中值

如圖1所示,從留學國家中選中需要的留學國家,選中顧問觸發事件,獲取選中的留學國家,如果留學國家爲空,提示留學國家不爲空
這裏寫圖片描述
圖1
前臺頁面代碼如下

InputStudy.aspx

 <div class="row" id="panelAbroad1" runat="server">
                        <div class="span12">
                            <div class="input-group">
                                <span class="input-group-addon ie_widthauto">留學國家:<font color="red">*</font></span>
                                <asp:CheckBoxList ID="ckkHopeCountryList"  CssClass="checkbox-inline form-control ie_widthauto checkboxlist "  runat="server" RepeatDirection="Horizontal" RepeatColumns="12">
                                </asp:CheckBoxList>
                            </div>
                        </div>
                    </div>
<div class="row" id="panelACouslt1" runat="server">
                        <div class="span5">
                            <div class="input-group">
                                <span class="input-group-addon ie_widthauto">顧問:<font color="red">*</font></span>
                                <select id="dllRecordDepList" name="dllRecordDepList" class="form-control ie_widthauto" runat="server">
                                    <option value="-1">無諮詢員</option>
                                </select>
                                <input type="hidden" id="hidRecDep" runat="server" />
                                <input type="hidden" id="hidAConsultant" runat="server" />
                                <span class="input-group-addon ie_widthauto">-></span>
                                <select name="selAConsultant" id="selAConsultant" class="form-control ie_widthauto" runat="server">
                                    <option value="-1">--請選擇-- </option>
                                </select>
                            </div>
                        </div>

                    </div>

後臺綁定checkboxlist數據,用的ORM
inputStudy.aspx.cs

 /// <summary>
        /// 留學國家
        /// </summary>
        private IList GetHopeCountryList(int GroupID)
        {
            IList RecepList = new ArrayList();
            IDataReader rdr;
            if (GroupID == 0)
            {
                rdr = DB.Context.FromSql("select CountryID,Country from tblRecepCountry where Flag=0").ToDataReader();
            }
            else
            {
                rdr = DB.Context.FromSql("select CountryID,Country from tblRecepCountry where Flag=0 and GroupID=@GroupID").AddInParameter("@GroupID", DbType.Int32, GroupID).ToDataReader();
            }
            while (rdr.Read())
            {
                Model.tblRecepCountry cyInfo = new Model.tblRecepCountry();
                cyInfo.CountryID = int.Parse(rdr["CountryID"].ToString());
                cyInfo.Country = rdr["Country"].ToString();
                RecepList.Add(cyInfo);
            }
            return RecepList;
        }

jQuery代碼
ConsultantType02.js

 $(document).ready(function () {
 $("#dllRecordDepList").change(function () {
        var id = $(this).val();
        var country = "";
        $("input[name^='ckkHopeCountryList']").each(function () {
            if (this.checked) {
                country = country + $(this).next().text() + "*";
            }
        });
        if (country == "" || country == undefined) {
            alert("留學國家不能爲空")
        } else {
            $.ajax({
                type: "POST",
                url: "../Handler/ConsultantType02.ashx",
                data: { type: "AConsultant", id: id, country: country },
                success: function (data) {
                    if (data == "fail") {
                        alert("loading failed");
                    }
                    else {
                        addAConsultantList(data);
                    }
                }
            });
        }
    });
  });

關鍵代碼爲

 var country = "";
        $("input[name^='ckkHopeCountryList']").each(function () {
            if (this.checked) {
                country = country + $(this).next().text() + "*";
            }
        });

通過F12觀察checkboxlist生成的是一個table對應的name是ckkHopeCountryList
這裏寫圖片描述
如果想了解ajax級聯的寫法可以點擊下面的連接
http://blog.csdn.net/sunping177/article/details/51162820

發佈了32 篇原創文章 · 獲贊 16 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章