在JavaScript中无法获取单个复选框的值问题排查

问题场景 #

开发ASP.NET WebForms页面时，页面包含三个HTML复选框，需求是将选中项对应的值追加到JavaScript字符串中。点击btnSave按钮调用saveOrderTypes()函数时，函数执行到alert("D")后直接退出，控制台无JavaScript错误提示，使用jQuery获取值时也出现类似问题。

原始代码 #

<asp:Content ID="scriptArea" runat="server" ContentPlaceHolderID="headerScript">
<script>
function saveOrderTypes() {

        alert("In saveOrderTypes");
        var orderTypes = '';

        if (document.getElementById('chkDelivery').checked) {
            orderTypes = 'D';
            alert("D");
        }
        if (document.getElementById('chkUPS').checked) {
            orderTypes = orderTypes + 'U';
            alert("U");
        }
        if (document.getElementById('chkCustomer').checked) {
            orderTypes = orderTypes + 'C';
            alert("C");
        }
        
        alert("orderTypes: " + orderTypes);
    //more code here
  }
 $(document)
   .ready(function () {

});
</script>
</asp:Content>
<asp:Content ID="mainDivision" ContentPlaceHolderID="mainContent" runat="server">
<div class="row" style="width: 100%">
    <div class="col-sm-4">
        <input type="checkbox" id="chkDelivery">
        <label >Delivery</label><br>
        <input type="checkbox" id="chkUPS">
        <label >UPS</label><br>
        <input type="checkbox" id="chkCustomer">
        <label >Customer</label><br>
        
    </div>
    
</div>
<button type="button"  id="btnSave" onclick="javascript:saveOrderTypes();return false;" 
>Save</button>
</asp:Content>

问题原因 #

ASP.NET WebForms使用母版页时（代码中包含ContentPlaceHolder，说明使用了母版页），服务器会自动重写HTML元素的ID，最终客户端渲染的元素ID会带上母版页和Content控件的前缀（比如ctl00_mainContent_chkDelivery）。此时用document.getElementById('chkDelivery')无法找到目标元素，访问checked属性时会触发未捕获的错误，导致函数中断执行。

解决方案 #

方案1：使用ClientID获取真实客户端ID #

给复选框添加runat="server"属性，然后在JavaScript中通过<%= 控件ID.ClientID %>获取服务器生成的客户端ID：

<!-- 修改复选框代码 -->
<input type="checkbox" id="chkDelivery" runat="server">
<input type="checkbox" id="chkUPS" runat="server">
<input type="checkbox" id="chkCustomer" runat="server">

<!-- 修改JavaScript中的选择器 -->
function saveOrderTypes() {
    alert("In saveOrderTypes");
    var orderTypes = '';

    if (document.getElementById('<%= chkDelivery.ClientID %>').checked) {
        orderTypes = 'D';
        alert("D");
    }
    if (document.getElementById('<%= chkUPS.ClientID %>').checked) {
        orderTypes += 'U';
        alert("U");
    }
    if (document.getElementById('<%= chkCustomer.ClientID %>').checked) {
        orderTypes += 'C';
        alert("C");
    }
    
    alert("orderTypes: " + orderTypes);
    //more code here
}

方案2：设置ClientIDMode为Static（.NET 4及以上支持） #

给复选框添加ClientIDMode="Static"，让ASP.NET不修改元素ID，保持原始ID不变：

<input type="checkbox" id="chkDelivery" runat="server" ClientIDMode="Static">
<input type="checkbox" id="chkUPS" runat="server" ClientIDMode="Static">
<input type="checkbox" id="chkCustomer" runat="server" ClientIDMode="Static">

此方式下，原始的JavaScript代码无需修改即可正常运行。

方案3：使用类选择器替代ID选择器 #

给每个复选框添加自定义类名，通过类选择器获取元素，避免ID重写问题：

<!-- 修改复选框代码 -->
<input type="checkbox" class="order-type" data-value="D">
<input type="checkbox" class="order-type" data-value="U">
<input type="checkbox" class="order-type" data-value="C">

<!-- 修改JavaScript函数 -->
function saveOrderTypes() {
    alert("In saveOrderTypes");
    var orderTypes = '';
    
    document.querySelectorAll('.order-type:checked').forEach(function(checkbox) {
        orderTypes += checkbox.dataset.value;
        alert(checkbox.dataset.value);
    });
    
    alert("orderTypes: " + orderTypes);
    //more code here
}

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