how to create a checkboxlist in ASP.Net MVC using jquery

Question

I want to generate dynamic checkboxes on the basis of selected value of dropdown.

@Html.DropDownListFor(x => x.Fromsource, new SelectList(Model.Fromsource, "Value", "Key"), "---Select---", new
                    {

                    })
@Html.CheckBox("Tosource", false, new { @class = "dropdown" })
<script>
  $("#Fromsource").change(function () {
            var urlSource = '@Url.Action("FillToSource", "PublishPost")';
            var fromsouyrcetype = $(this).val();
            if (fromsouyrcetype != "") {
                $.ajax({
                    url: urlSource,
                    method: "GET",
                    data: {
                        "sourceType": fromsouyrcetype
                    },
                    success: function (result) {

                        $.each(result, function (index, value) {
                            //what to write here?
                           //value.name = name of the checkbox
                          //value.id = value of the checkbox
                        });
                    }
                });
            } else {


            }

        });</script>

value.id and value.name are the values which i want to fill for checkbox as mentioned in the comment above.

Not clear what your wanting to do. - $('#Tosource').empty(); makes no sense (it clears the child elements of the element and a checkbox does not have any). Are you wanting to create multiple checkboxes? — user3559349
– user3559349, Commented Aug 17, 2015 at 7:21
It's not acceptable to have List<bool> instrad of your FromSource? Initially, one bool in the model reprendents checkbox. — clement
– clement, Commented Aug 17, 2015 at 7:21

Saineshwar Bageri - MVP · Accepted Answer · 2019-08-30 08:02:56Z

If I understand your question right, you want to dynamically create checkboxes based on the result that you are getting from server (query performed each time that dropdown value changed):

<div id="checkboxContainer"></div>
<script>
  $("#Fromsource").change(function () {
            var urlSource = '@Url.Action("FillToSource", "PublishPost")';
            var fromsouyrcetype = $(this).val();
            if (fromsouyrcetype != "") {
                $.ajax({
                    url: urlSource,
                    method: "GET",
                    data: {
                        "sourceType": fromsouyrcetype
                    },
                    success: function (result) {
                            $('#checkboxContainer').empty();
                            var content;
                            $.each(result, function (index, value) {
                                content += '<input type="checkbox" name="'+ value.name +'" id="'+value.id+'"/>'
                            });
                            $('#checkboxContainer').html(content);
                        }
                });
            } else {
                $('#checkboxContainer').empty();

            }

        });</script>

GHULAM GAUS · Accepted Answer · 2024-09-11 02:10:29Z

0

$(document).ready(function () {
    $.ajax({
        url: "/Home/ProductsBinding",
        type: 'GET',
        success: function (data) {
            var container = $('#checkboxList');
            container.empty(); // Clear any existing content

            $.each(data, function (index, item) {
                var checkboxHtml = `
                        <div>
                            <input type="checkbox" id="item_${item.id}" value="${item.id}" ${item.IsChecked ? 'checked' : ''} />
                            <label for="item_${item.id}">${item.ProductName}</label>
                        </div>
                    `;
                container.append(checkboxHtml);
            });
        },
        error: function (xhr, status, error) {
            console.error('Failed to load checkbox items:', status, error);
        }
    });
});

answered Sep 11, 2024 at 2:10

GHULAM GAUS

1

1 Comment

Jeremy Caney Over a year ago

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Collectives™ on Stack Overflow

how to create a checkboxlist in ASP.Net MVC using jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related