ASP.NET MVC中用jQuery将健康状态值存入隐藏域并传递给Approve函数

1. 添加隐藏域 #

在复选框所在的<div>内添加绑定到HealthStatus的隐藏域，可选用HtmlHelper或原生HTML写法：

HtmlHelper写法 #

<div class="col-md-7">
    <input type="checkbox" id="HealthStatusTrue" name="HealthStatus" value="true" class="healthstatus-checkbox" @(Model.HealthStatus == true ? "checked" : "") />
    Yes
    &nbsp;&nbsp;
    <input type="checkbox" id="HealthStatusFalse" name="HealthStatus" value="false" class="healthstatus-checkbox" @(Model.HealthStatus == false ? "checked" : "") />
    No
    <!-- 添加隐藏域 -->
    @Html.HiddenFor(m => m.HealthStatus, new { id = "HealthStatusHidden" })
</div>

原生HTML写法 #

<div class="col-md-7">
    <input type="checkbox" id="HealthStatusTrue" name="HealthStatus" value="true" class="healthstatus-checkbox" @(Model.HealthStatus == true ? "checked" : "") />
    Yes
    &nbsp;&nbsp;
    <input type="checkbox" id="HealthStatusFalse" name="HealthStatus" value="false" class="healthstatus-checkbox" @(Model.HealthStatus == false ? "checked" : "") />
    No
    <!-- 添加隐藏域 -->
    <input type="hidden" id="HealthStatusHidden" name="HealthStatus" value="@Model.HealthStatus" />
</div>

2. 完善复选框change事件处理 #

由于要求使用复选框而非单选按钮，需先处理互斥逻辑（勾选一个时取消另一个的选中状态），再给隐藏域赋值：

$('.healthstatus-checkbox').on('change', function () {
    // 获取当前选中复选框的值
    var selectedValue = $(this).val();
    
    // 互斥处理：取消其他复选框的选中状态
    $('.healthstatus-checkbox').not(this).prop('checked', false);
    
    // 将选中值存入隐藏域
    $('#HealthStatusHidden').val(selectedValue);
});

3. 完善approve函数获取布尔值 #

隐藏域存储的是字符串类型的"true"/"false"，需转换为布尔类型后使用：

function approve() {
    // 从隐藏域取值并转换为布尔类型
    var healthStatus = $('#HealthStatusHidden').val() === 'true';
    
    // 可在此处使用该布尔值，比如传递给后端接口或执行业务逻辑
    console.log("健康状态：", healthStatus);
    
    // 示例：提交到后端接口
    // $.post('/YourController/YourAction', { HealthStatus: healthStatus }, function(res) {
    //     // 处理响应结果
    // });
}

额外提示 #

• 实体类中HealthStatus为可空布尔类型（bool?），若需处理未选中任何选项的场景，可在approve函数中添加空值判断：

  var hiddenValue = $('#HealthStatusHidden').val();
  var healthStatus = hiddenValue ? (hiddenValue === 'true') : null;
  

• 确保页面已正确引入jQuery，否则上述脚本无法生效。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz