ASP.NET MVC中如何在JS提交函数获取Checkbox布尔值？

模型类调整 #

根据更新后的需求，将模型中的RetainStuff改为可空布尔类型，确保未选择时能传递null：

public class ApprovalModel
{
    public bool? RetainStuff { get; set; }
    // 其他业务属性...
}

HTML结构优化 #

给两个复选框设置唯一ID，方便jQuery定位：

<div class="option-group">
    <label>
        <input type="checkbox" id="retainYes"> 保留（Yes）
    </label>
    <label>
        <input type="checkbox" id="retainNo"> 不保留（No）
    </label>
</div>
<button type="button" onclick="submitApproval()">Approve</button>

1. jQuery实现复选框互斥逻辑 #

页面加载完成后，给两个复选框绑定change事件，确保选中其中一个时自动取消另一个的选中状态：

$(function() {
    $('#retainYes, #retainNo').change(function() {
        const isChecked = $(this).is(':checked');
        if (isChecked) {
            // 取消另一个复选框的选中状态
            const targetId = $(this).attr('id') === 'retainYes' ? '#retainNo' : '#retainYes';
            $(targetId).prop('checked', false);
        }
    });
});

2. 提交函数获取RetainStuff对应值 #

在submitApproval函数中，根据复选框选中状态确定RetainStuff的值，再提交到后端：

function submitApproval() {
    let retainValue = null;

    // 判断选中状态
    if ($('#retainYes').is(':checked')) {
        retainValue = true;
    } else if ($('#retainNo').is(':checked')) {
        retainValue = false;
    }

    // 提交到后端示例（AJAX方式）
    $.post('/Approval/Submit', { RetainStuff: retainValue }, function(response) {
        alert('提交成功');
    }).fail(function() {
        alert('提交失败，请重试');
    });
}

补充说明 #

• 如果需要强制用户必须选择其一，可在提交前增加校验：

  if (retainValue === null) {
      alert('请选择Yes或No');
      return;
  }
  

• 后端Action需接收可空布尔类型参数：

  [HttpPost]
  public ActionResult Submit(bool? RetainStuff)
  {
      // 处理业务逻辑
      return Json(new { success = true });
  }
  

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