Question

将复选框添加到复选框列表中。

例如：我将数据集值传递为“1001”，“1002”，“1003”，“1004”，“1005”，并使用GetXml（）函数将此值作为XML获取。

以上值，将分别为5个复选框添加到复选框列表中。

Default.apsx.vb

<WebMethod()> _
    Public Shared Function returnData() As String

        Dim dsUtil As New DataSet
        Dim lstSQL As String
        Dim fdat, tdat, detai, valG, sta As String
        Try
            fdat = "20140317"
            tdat = "20140318"
            detai = "College"
            valG = "Y"
            sta = "2"

            lstrSQL = ("Exec SP_College '" & fdat & "','" & tdat & "','" & detai & "','" & valG & "','" & sta & "'")
            _Command = New SqlCommand(lstSQL)

            Return GetDataset(_Command).GetXml()
        Catch Ex As Exception
            Throw New Exception("Error " & Ex.Message)
        End Try
        'Return ms
    End Function


Public Shared Function GetDataset(ByVal tSQLQuery As SqlCommand) As DataSet

        Dim ds As New DataSet
        cn = New SqlConnection("Data Source=localhost; Initial Catalog = master;uid=sa;pwd=sa;")
        Try
            cn.Open()
            Dim da As New SqlDataAdapter(_Command)

            _Command.CommandType = CommandType.Text
            _Command.Connection = cn

            da.Fill(ds, "UTable")

            Return ds

        Catch oEx As Exception
            Throw New Exception("GetDataset-" & oEx.Message)
        Finally
            ds.Dispose()
        End Try

    End Function



**Default.aspx page**

<table>
<tr>
<td>
<input type="button" id="btnTray" value="Click here" onclick="checnkAjaxfn()"/>
</td>
<td>
<div id="divCheckBoxList" >
<asp:CheckBoxList ID="chklistId" runat="server">
</asp:CheckBoxList>
 </div>
</td>
</tr>
</table>


**Ajax. Json script:**

function checnkAjaxfn() {
         $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "Default.aspx/returnData",
          data:{},
          dataType: "json",
          success: OnSuccess,
          failure: function (response) {
           alert(response.d);
          },
          error: function (response) {
           alert(response.d);
          }
         });
       }


function OnSuccess(response) {
        debugger;
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var xmlData = xml.find("UTable");

        var row = $("[id*=chklistId] tr:last-child").clone(true);

        $("[id*=chklistId] tr").remove();

        $.each(xmlData , function () {
         var xData = $(this);
         $("label", row).val($(this).find("Sys_ID").text());
         $("[id*=chklistId] tbody").append(row);
         row = $("[id*=chklistId] tr:last-child").clone(true);
        });
       }

以上内容不会将复选框添加到复选框列表中。

我调试了。到达时

$。each（xmlData，function（）{

这一行，它来到终点。

请说明如何在checkboxlist

中生成复选框

Answer 1

如果您使用的是asp.net CheckboxList控件，它将在将数据源绑定到它后呈现。如果您不想绑定数据源，则使用CheckboxList没有意义，而是生成具有相同名称的纯HTML复选框。

示例：

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

您可以使用jQuery生成此html，如下所示：

$(function () {
var arry = ["Bike","Car"];
$(arry).each(function () {
    var checkBox = "<input type='checkbox' name='vehicle' value='" + this + "'/>" + this + "<br/>";
    $(checkBox).appendTo('#divPlaceHolder');
});});

现在，在您的查询中，您可以使用上面的示例，只需将数组替换为xml输出。

Answer 2

您在Ajax请求中建议的dataType是JSON，但您正在发送XML数据。参考https://api.jquery.com/jQuery.ajax/说：

“json”：将响应评估为JSON并返回JavaScript对象。 JSON数据以严格的方式解析;任何格式错误的JSON都会被拒绝，并抛出一个解析错误。从jQuery 1.9开始，空响应也被拒绝;服务器应该返回null或{}的响应。（有关正确的JSON格式的更多信息，请参阅json.org。）

也许你的ForEach循环只是跳到结束行，你的xmlData变量是空的吗？

Answer 3

<html>
<head><h1><b><i><center>RADIO BUTTONS </center></i></b></h1></head>
<body  bgcolor="palegoldenrod">
<form>
<script src="jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
$("#age").blur(function() {
        var test = $(this).val();
        if(test=="")
        {
        $("#dropdown").hide();
        }
        else 
        {
        $("#dropdown").show();
        }

    });

    $.ajax({ 
        type: "GET", 
        url: "count.xml", 
        dataType: "xml", 
        success: function (xml) { 
            $(xml).find('countrylist').each(function () {
                var name = $(this).find('cname1').text(); 
                var option1 = $("<radio>" + name + "</radio>"); 
                var select=$("#div1");
                select.append(option1);

                var name = $(this).find('cname2').text(); 
                var option2 = $("<radio>" + name + "</radio>"); 
                var select=$("#div2");
                select.append(option2);

                var name = $(this).find('cname3').text(); 
                var option3 = $("<radio>" + name + "</radio>"); 
                var select=$("#div3");
                select.append(option3);
            });
        }   
    });
    });


function myCountry(country)
{
alert("HI" +country);   
 $.ajax({ 
            type: "GET", 
            url: "stat.xml", 
            dataType: "xml", 
            success: function (xml) { 
                var select = $('#div4'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname').text();    
                select.append($("<label>" + name + "</label>"));
                }
                }); 
                var select = $('#div5'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname1').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div6'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div7'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname3').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div8'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname4').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });
                var select = $('#div9'); 
                $(xml).find('state').each(function () 
                {
                var cval=$(this).find('country').text(); 
                if(country==cval){
                var name = $(this).find('sname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                });

                        }
     });
}

function myFun(city)

{
alert("hiiiii" +city);  
 $.ajax({ 
            type: "GET", 
            url: "city.xml", 
            dataType: "xml", 
            success: function (xml) { 
                $(xml).find('city').each(function () 
                {
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div10');
                var name = $(this).find('cname').text();    
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div11');
                var name = $(this).find('cname1').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div12');
                var name = $(this).find('cname2').text();   
                select.append($("<label>" + name + "</label>"));
                }
                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div13');
                var name = $(this).find('cname3').text();   
                select.append($("<label>" + name + "</label>"));
                }

                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div14');
                var name = $(this).find('cname4').text();   
                select.append($("<label>" + name + "</label>"));
                }


                var sval=$(this).find('state').text(); 

                if(city==sval)
                {
                var select = $('#div15');
                var name = $(this).find('cname5').text();   
                select.append($("<label>" + name + "</label>"));
                }
                }); 
        }
     });
}

</script>


<br>
<br>
<br>
<label style="width:100px;float:left;">First Name</label> <input type="text" id="name"><br><br>
<label style="width:100px;float:left;">Middle Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Last Name</label> <input type="text"><br><br>
<label style="width:100px;float:left;">Address Line1</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Address Line2</label> <textarea rows="3" cols="16"></textarea><br><br>
<label style="width:100px;float:left;">Age</label> <input type="number" id="age" value="a"><br><br>
<div id="dropdown" style="display:none">

<label style="width:100px;float:left;">Country</label> <br>

<div id="div1">
<input type="radio" name="country" id="ind" value="India" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div2">
<input type="radio" name="country" id="usa" value="US" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label> </div><br>

<div id="div3">
<input type="radio" name="country" id="cnd" value="Australia" onclick="myCountry(this.value)">
<label style="width:100px;float:left;"></label></div>
<br>
<br>
<br>


<label style="width:100px;float:left;">State</label> <br>
<br>
<div id="div4">
<input type="radio" name="rad" id="radio2" value="Tamil Nadu" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div5">
<input type="radio" name="rad"  id="radio2" value="Andhra Pradesh" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div6">
<input type="radio" name="rad" id="radio2" value="Florida" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div7">
<input type="radio" name="rad" id="radio2" value="NewJersey" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div8">
<input type="radio" name="rad" id="radio2" value="Queensland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<div id="div9">
<input type="radio" name="rad" id="radio2" value="Maryland" onchange="myFun(this.value)"><label style="width:100px;float:left;"></label>
</div>
<br>
<br>
<br>

<label style="width:100px;float:left;">City:</label> <br>

<div id="div10">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div11">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div12">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div13">
<input type="radio" name="ra" id="c1"  >
</div>

<div id="div14">
<input type="radio"  name="ra" id="c1"  >
</div>

<div id="div15">
<input type="radio" name="ra" id="c1"  >
</div>





<br>
<br>
<br>

<br>
<br>
<br>


<button value="" id="but">OK</button>
</b>
</form>
</body>
</html>
*/xml code/*

使用asp.net中的Jquery ajax方法将复选框添加到Checkboxlist中

3 个答案: