MVC CORE 多選CHECKBOX,並存入文字

  • 1014
  • 0

MVC CORE 多選CHECKBOX,並存入文字

這個需求是希望使用者多選CHECKBOX後

把CHECKBOX的文字存入

所以

欄位不是單純的BOOL型態

 

試了一下

還是用JS的事件來處理比較快

在按下按鈕後觸發update事件

在update事件去組出使用者所選擇的CHECKBOX的文字

然後塞到  @Html.HiddenFor(model => model.QUESTION1)

 

而CHECKBOX的資料一樣是用ViewBag來處理

controller

public IActionResult Create()
        {
            
            var STATUSList = new List<SelectListItem>()
            {
                new SelectListItem {Text="狀況1", Value="1" },
                new SelectListItem {Text="狀況2", Value="3" },
                new SelectListItem {Text="狀況3", Value="3" },
              

            };
            // Store your model in the ViewBag
            ViewBag.STATUSList = STATUSList;

            return View();
        }

view

 <div class="form-group">
                <label asp-for="QUESTION1" class="control-label"></label>

                @foreach (var STATUS in ViewBag.STATUSList)
                {
                    <div style="padding-right:15px;margin-left:20px;width: 1000px;">
                        <input id="@STATUS.Text" type="checkbox" name="STATUS" value="@STATUS.Value" />
                        <label for="@STATUS.Text">
                            @STATUS.Text
                        </label>
                    </div>
                }
                @Html.HiddenFor(model => model.QUESTION1)
                @*<input asp-for="QUESTION1" class="form-control" />*@
                <span asp-validation-for="QUESTION1" class="text-danger"></span>

 </div>

<div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" onclick="update()" />
</div>


<script>
    function update(arg) {
        var CHECKBOXLIST = ""
        //Iterating the collection of checkboxes which checked marked
        $('input[type=checkbox][name=STATUS]').each(function () {
            if (this.checked) {
                CHECKBOXLIST = CHECKBOXLIST + $(this).val() + ","
                //assign set value to hidden field
                $('#QUESTION1').val(CHECKBOXLIST);
            }
        });

    }
</script>

 

 

自我LV~