connecting data values to checkbox and set them to checked

Question

I'm trying to get the correct checkboxes to be checked based on values that are being fetched from the database. So in my C# code I have a function that fetched data, and in my index I receive these. Here's the JavaScript/jQuery function where I get the data:

$.ajax({
                   type: 'POST',
                   url: '@Url.Action("getRequestType", "Garage")?garageId=' + garageId,
                   dataType: 'JSON',
                   data: {
                       garageId: garageId
                },
                success: function (data) {
                    Values = data;
                    console.log(garageId, data);

                    if (data.length > 0) {
                        console.log("Has values: " + data);
                    }
                    else if (data.length <= 0) {
                        console.log("Has no values");
                    }
                }
            });

When using console.log I can see the values, so for example it could be: garageId: 4, "Has values: 4, 5, 8". Now I would like these values to be connected to these checkboxes:

       @foreach (var items in Model)
        {
            <style>
                .ab {
                    margin-right: 8px;
                }
            </style>

            <div style=" width: 40%; display: block; float: right; margin-right: 10%; margin-top: 10%;">
                <h4>Choose request types for garage:</h4><br />
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Claim</label>
                        <input type="checkbox" class="checkbclass" name="@items.Claim" id="Claim" placeholder="Claim" value="1" /> <!-- values for request type -->
                    </div>
                </div>
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Scheduled Service</label>
                        <input type="checkbox" class="checkbclass" name="@items.ScheduledService" id="ScheduledService" placeholder="Scheduled" value="2" />
                    </div>
                </div>
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Tires</label>
                        <input type="checkbox" class="checkbclass" name="@items.Tires" id="Tires" placeholder="Tires" value="3" />
                    </div>
                </div>
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Rent Replacement Car</label>
                        <input type="checkbox" class="checkbclass" name="@items.RentRepalcementCar" id="RentRepalcementCar" placeholder="Tires" value="4" />
                    </div>
                </div>
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Other Work</label>
                        <input type="checkbox" class="checkbclass" name="@items.OtherWork" id="OtherWork" placeholder="Tires" value="5" />
                    </div>
                </div>
                <div class='form-group'>
                    <div class="rowa">
                        <label class="ab">Insurance</label>
                        <input type="checkbox" class="checkbclass" name="@items.Insurance" id="Insurance" placeholder="Tires" value="6" />
                    </div>
                </div><br />
            </div>
        }

I've tried code similar to:

for (i = 0; i < Values.length; i++) {
                if (Values == 1) {
                    $("#Claim").prop("checked", true);
                }
                if (Values == 2) {
                    $("#ScheduledService").prop("checked", true);
                }
                if (Values == 3) { 
                    $("#Tires").prop("checked", true);
                }
                if (Values == 4) {
                    $("#RentRepalcementCar").prop("checked", true);
                }
                if (Values == 5) {
                    $("#OtherWork").prop("checked", true);
                }
                if (Values == 6) {
                    $("#Insurance").prop("checked", true);
                }
                return Values;

And:

 $.ajax({
                   type: 'POST',
                   url: '@Url.Action("getRequestType", "Garage")?garageId=' + garageId,
                   dataType: 'JSON',
                   data: {
                       garageId: garageId
                },
                success: function (data) {
                    Values = data;
                    console.log(garageId, data);

                    if (data.length > 0) {
                        //console.log("Has values: " + data);

                        if (data == 1) {
                            $("#Claim").prop("checked", true);
                        }
                        if (data == 2) {
                            $("#ScheduledService").prop("checked", true);
                        }
                        if (data == 3) {
                            $("#Tires").prop("checked", true);
                        }
                        if (data == 4) {
                            $("#RentRepalcementCar").prop("checked", true);
                        }
                        if (data == 5) {
                            $("#OtherWork").prop("checked", true);
                        }
                        if (data == 6) {
                            $("#Insurance").prop("checked", true);
                        }
                    }
                    else if (data.length <= 0) {
                        console.log("Has no values");
                    }
                }
            });

But, I hasn't had any success. The last method makes it possible to check boxes where garageid has one value (so basically one checkbox can be checked). Would much appreciate any help with this, if someone has any suggestions!

Answer 1

Note that Values is array and you need to use [i] for it:

for (i = 0; i < Values.length; i++) {
    if (Values[i] == 1) {
        $("#Claim").prop("checked", true);
    }
    else if (Values[i] == 2) {
        $("#ScheduledService").prop("checked", true);
    }
....

Also you can use switch case too that is better option:

for (i = 0; i < Values.length; i++) {
    switch (Values[i]) {
        case 1:
            $("#Claim").prop("checked", true);
            break;
        case 2:
            $("#ScheduledService").prop("checked", true);
            break;
        ....
        default:
            console.log("Error");
    }
}