How to populate asp.net CheckBoxList control via jQuery

Question

I have two checkboxlists on a page - Parent and Child. Both are in seperate collapsable divs. When the Parent's div collapses I use jquery to call a WebMethod that executes a query on the database, serializes the returned List to json, and returns it to the jquery method.

The above all works very well and I am able to successfully get the expected json string.

What I would like to do now is to populate the Child checkboxlist based on that json data. Preferrably, I would like to be able to set the text and value as well (the DataTextField and DateValueField properties of the checkboxlist).

Can anyone provide examples of how to do this?

   function RunCentralEffect() {
        $("#ParentDiv").hide('blind', 200);
        var names = [];
        $('#ParentDiv input:checked').each(function () {
            names.push(this.value);
        });
        $.ajax({
            type: "POST",
            url: "BranchReportForm.aspx/MyWebMethod",
            data: "{'args': '" + names + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert('Success!');
                //Now what?
            }
        });
    }

Thank you!

Andy Rose · Accepted Answer · 2011-04-08 16:03:42Z

1

When you are talking about ChecbkboxList controls, DataValueField and DataTextField properties you are referring to ASP.NET abstractions which your jQuery methods will have no knowledge of as these are handled in your codebehind which generates the HTML that is sent to the browser.
What you are going to have to do is manipulate the DOM elements directly. Without knowing a bit more about the actual html layout that is generated by your code it is tricky to provide more of an answer but at a high level you will need to loop through your returned json objects and append a new checkbox and label into the appropriate div.

answered Apr 8, 2011 at 16:03

Andy Rose

17k7 gold badges45 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Marchetti · Accepted Answer · 2011-04-08 16:14:06Z

0

Your javascript code won't have any idea what DataValueField or DataTextField are.

Remember, .Net renders the control as HTML, so it would probably look something like this:

<input type="checkbox" name="vehicle" value="Infiniti" /> Infiniti
<input type="checkbox" name="vehicle" value="Pontiac" /> Pontiac

To set whether they are checked or not:

$('input[name=vehicle]').attr('checked', true);
$('input[name=vehicle]').attr('checked', false);

To set the values, I think you can use .val();

$('input[name=vehicle]').val('BMW');

answered Apr 8, 2011 at 16:14

Jack Marchetti

15.8k14 gold badges85 silver badges119 bronze badges

Collectives™ on Stack Overflow

How to populate asp.net CheckBoxList control via jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related