Iterate and display checkbox elements that have been checked in modal

I have a pop up displayed in a modal, and when called the user will see any number of checkboxes and be able to check the ones they want to be involved in. What Im struggling with is when they close the modal pop up, I want the ones they have selected to appear as if by magic just below the button they click to open up the pop up.

So Im not sure how to read through the model thats below in the modal-body and change that and use jquery to display only the ‘Offices’ that have been selected, hope that makse sense.

This below is the modal pop up with the model in the body

<div class="modal" id="servicingOfficeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Servicing Office/s</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @for (int i = 0; i < Model.ServicingOfficeModels.Count; i++)
                {
                    @Html.HiddenFor(model => model.ServicingOfficeModels[i].Id)
                    @Html.HiddenFor(model => model.ServicingOfficeModels[i].Name)
                    <span>@Model.ServicingOfficeModels[i].Name &nbsp</span> @Html.EditorFor(model => model.ServicingOfficeModels[i].IsMember) <br />
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

So I don’t need the id in the display, just a way of iterating through Model.ServicingOfficeModels and picking out the ones that have been selected by the user.

To try and use something from google I found this below, and was going to change it to suit but I cant work it out

                <script>
                    $('input[name=neighborhood_id]').change(function () {
                        $('#area').val(
                            $('[name=neighborhood_id]:checked').map(function () {
                                return $(this).val();
                            }).get().join(',')
                        );
                </script>

This is sort of what I could see in my head but its not working

                <script>
                    $('input[name=ServicingOfficeModels]').change(function () {
                        $('#servicingOfficeModal').val(
                            $('[name=ServicingOfficeModels]:checked').map(function () {
                                return $(this).val();
                            }).get().join(',')
                        );
                </script>

Im guessing though that it isnt the form I should be checkboxes I should be trying to read from but the values stored with checkboxes selected in Model.ServicingOfficeModels.

I’m thinking this is a bit closer to what I need, just testing at this point to try and get anything working

<script>                   
var officesChecked = model.ServicingOfficeModels;
      $.each(officesChecked, function () {
      return('Office checked: ' + this.model.ServicingOfficeModels.Name).join('<br/>');
 });
</script>

I have made progress, I’m getting output, but for some reason it knows how many I have selected but its only outputting the name of the first one, and then for example if I have selected 3 offices, it will output the name of the first one 3 times, and I also tried adding on .join(’
’.) after the append and it broke it.

<!-- #region ServicingOfficeModal -->
<div class="modal" id="servicingOfficeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Servicing Office/s</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @for (int i = 0; i < Model.ServicingOfficeModels.Count; i++)
                {
                    @Html.HiddenFor(model => model.ServicingOfficeModels[i].Id)
                    @Html.HiddenFor(model => model.ServicingOfficeModels[i].Name)
                    <span>@Model.ServicingOfficeModels[i].Name &nbsp</span> @Html.EditorFor(model => model.ServicingOfficeModels[i].IsMember, new { htmlAttributes = new { @data_office_Name = @Model.ServicingOfficeModels[i].Name } }) <br />
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary servicingClose" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- #endregion -->

Then this is the jscript and output div area

<div id="servicing">
<h5>Servicing Office/s <a><img id="icnRoles" data-toggle="modal" data-target="#servicingOfficeModal" src="@Url.Content("~/Images/Shared/Cog.png")" height="15" /></a></h5>

<script>
 $('.servicingClose')
.button()
.click(function () {
    var selectedMultipleChoiceOptions = $('input.check-box:checked');
        selectedMultipleChoiceOptions.each(function (i) {
        $('#servicingOfficeList').append(selectedMultipleChoiceOptions.data('office-name'));
    });
});
</script>

<div id="servicingOfficeList"></div>
</div>

So although I can get the correct number of offices I have selected, it will only show the first one that many times, and then I can get them to output on a line each

OK I got it

$('.servicingClose')
.button()
.click(function () {
var selectedMultipleChoiceOptions = $('input.check-box:checked');
selectedMultipleChoiceOptions.each(function () {
    $('#servicingOfficeList').append($(this).data('office-name')).append('<br>');
    });
});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.