change dropdown list to checkbox in ajax jquery in mvc

In my project I used cascaded drop down list using jquery ajax and it works, but I need to change the second drop down list to checkbox to select the City based on the districts selected from the first drop down list and also the items selected using checkbox need to be saved in the database. But I am new to MVC and Iam not able to give the code for check box in the correct way.

controller

public ActionResult Create()
    {
        ViewBag.DistrictId = new SelectList(db.DistrictMasters, "Id", "DistrictName");

        return View();
    }

 public JsonResult GetPosts(string id)
    {
        List<SelectListItem> posts = new List<SelectListItem>();
        var postList = this.Getpost(Convert.ToInt32(id));
        var postData = postList.Select(m => new SelectListItem()
        {
            Text = m.PostName,
            Value = m.Id.ToString(),
        });
        return Json(postData, JsonRequestBehavior.AllowGet);
    }

public IList<PostMaster> Getpost(int DistrictId)
    {
        return db.PostMasters.Where(m => m.DistrictID == DistrictId).ToList();
    }

  [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Create([Bind(Include = "Id,PostId,DistrictId")] Agent agent, FormCollection formdata)
    {
        if (ModelState.IsValid)
        {
            db.Agents.Add(agent);
            await db.SaveChangesAsync();
            return RedirectToAction("Index");
        }

        return View(agent);
    }

view create

@model A.Models.Agent

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
 <div class="form-horizontal">
  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 <div class="form-group">
        @Html.LabelFor(model => model.PostMaster.DistrictID, "DistrictName", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("DistrictId", ViewBag.DistrictId as SelectList, "-- Please Select  --", new { style = "width:250px" }) 
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PostId, "PostName", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("PostMaster", new SelectList(string.Empty, "Value", "Text"), "-- Please select --", new { style = "width:250px", @class = "dropdown1" })
        </div>
    </div>
 <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<script type="text/javascript">
$(document).ready(function () {
    //District Dropdown Selectedchange event
    $("#DistrictId").change(function () {
        $("#PostMaster").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetPosts")', // Calling json method
            dataType: 'json',
            data: { id: $("#DistrictId").val() },
            // Get Selected post id.
            success: function (posts) {
                $.each(posts, function (i, post) {
                    $("#PostMaster").append('<option value="' + post.Value + '">' +
                         post.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Failed to retrieve post.' + ex);
            }
        });
        return false;
    })
});

I think this part which I need to change in jquery, but I am not able to do it

 success: function (posts) {
                $.each(posts, function (i, post) {
                    $("#PostMaster").append('<option value="' + post.Value + '">' +
                         post.Text + '</option>');
                });
            },


  <div class="form-group">
        @Html.LabelFor(model => model.PostId, "PostName", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("PostMaster", new SelectList(string.Empty, "Value", "Text"), "-- Please select --", new { style = "width:250px", @class = "dropdown1" })       

        </div>
    </div>

this is my part of my code. can anyone please help me to find the solution