jquery 如何让复选框选中或不点击提交按钮剃刀页mvc？

mcvgt66p 于 2023-05-17 发布在 jQuery

关注(0)|答案(1)|浏览(193)

我在asp.net核心MVC剃刀页面工作。我面临的问题，我不能得到复选框选中或不对页面模型剃刀页。
所以哪个复选框已经选中或没有选中这正是我需要得到页面模型MVC。
因此，如果复选框StockTake和ShelfLabelPrint选中，那么我将在页面模型上获得值1和2为真。
复选框“传输”未选中，因此它将获得值3状态false。

public class AddUserAccessModel : PageModel
    {
        [BindProperty]
        public UC.ADC.Core.Entities.SQL.UserAccess UserAccess { get; set; }
public async Task OnPost(UC.ADC.Core.Entities.SQL.UserAccess useraccess)
        {
       string[] checkedModuleCodes = Request.Form["checks"];
      // How to recognize which check box have checked or not here
        }
    }

ON AddUserAccess.cshtml Razor视图

@Html.AntiForgeryToken()
    <form method="post">
        <button  type="submit" class="col-sm-1 btn btn-primary">Submit</button>
        
        <div class="form-group row">
            <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
            <div class="col-sm-3">
                <input id="useraccess-id"  asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
            </div>
        </div>
    <input id="StockTake" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
        <label for="lblStockTake">Stock Take</label>
    <input id="ShelfLabelPrint" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
        <label for="lblShelfLabel">Shelf Label Print</label>

    <input id="Transfer" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
        <label for="lblTransfer" style="margin-right:5px;">Transfer</label>

        
       
        
    </form>

我需要的期望结果如下

jquery

来源：https://stackoverflow.com/questions/76227897/how-to-get-check-box-checked-or-not-when-click-submit-button-razor-page-mvc

1条答案

按热度按时间

nmpmafwu1#

在我看来，你可以创建一个模型包含value和isChekced状态，请参考这个演示.

型号

public class Result
    {
        public string value { get; set; }
        public bool isChecked { get; set; }
         public string name { get; set; }
    }

将该模型添加到页面模型中

[BindProperty]
public List<Result> result { get; set; } = new List<Result>();

使用javascript根据用户是否选中视图中的复选框来设置结果的值

@Html.AntiForgeryToken()
<form method="post">
    <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>

    <div class="form-group row">
        <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
        <div class="col-sm-3">
            <input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
        </div>
    </div>

<div>
    <input id="StockTake" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
    
    <input name="result[0].isChecked" type="hidden" value="false"/>
    <input name="result[0].value" type="hidden" value="1"/>
    <input name="result[0].name" type="hidden" value="StockTake" />
    <label for="lblStockTake">Stock Take</label>
</div>
<div>
    <input id="ShelfLabelPrint" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
    <input name="result[1].isChecked" type="hidden" value="false" />
    <input name="result[1].value" type="hidden" value="2" />
    <input name="result[1].name" type="hidden" value="ShelfLabelPrint" />
    <label for="lblShelfLabel">Shelf Label Print</label>
</div>

<div>
    <input id="Transfer" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
    <input name="result[2].isChecked" type="hidden" value="false" />
    <input name="result[2].value" type="hidden" value="3" />
    <input name="result[2].name" type="hidden" value="Transfer" />
    <label for="lblTransfer" style="margin-right:5px;">Transfer</label>
</div>    
</form>

@section Scripts{
    <script>
        $(document).ready(function () {
            $('#StockTake').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[0].isChecked"]').val(isChecked);
            });

            $('#ShelfLabelPrint').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[1].isChecked').val(isChecked);
            });

            $('#Transfer').change(function () {
                var isChecked = $(this).is(':checked');
                $('input[name="result[2].isChecked').val(isChecked);
            });
        });
    </script>
}

GIF演示

赞(0）回复(0）举报 2023-05-17

我来回答

jquery 如何让复选框选中或不点击提交按钮剃刀页mvc？

1条答案

相关问题

热门标签

最新问答