如何修复JSP与JS中使用相同ID导致的功能失效问题？

问题分析 #

你页面中同时存在两个ID为checkActes的元素（<s:hidden>和<s:checkbox>），违反了HTMLID必须唯一的规范。jQuery通过$('#checkActes')选择元素时，只会匹配页面中第一个出现的该ID元素（也就是hidden输入框），而hidden输入框无法触发点击事件，导致你的JS逻辑完全失效。

原始代码 #

JSP代码

<s:hidden name="checkActes" id="checkActes"></s:hidden>
 
<s:checkbox id="checkActes" labelposition="left" cssClass="block-left check" 
label="%{getText('prestationPsDto.actes')}" key="prestationPsDto.actesSpec"/>  

JS代码

$('#checkActes').on('click',function() {
    console.log("kjfffkj");
    if($('#checkActes').is(':checked')){
        console.log("kjkj")
        $("#cleCotation").show()
    }
    else{
        $("#cleCotation").hide()
        $('#cleCotation').find("input,select").val('');
    }
}); 

解决方案 #

方案1：给hidden标签更换唯一ID

保持hidden标签的name不变（确保能正常向Java传递变量），仅修改其ID为唯一值，checkbox保留原ID。

<s:hidden name="checkActes" id="checkActesHidden"></s:hidden>
 
<s:checkbox id="checkActes" labelposition="left" cssClass="block-left check" 
label="%{getText('prestationPsDto.actes')}" key="prestationPsDto.actesSpec"/>  

JS代码无需修改，此时$('#checkActes')会正确选中checkbox，点击事件正常触发。

方案2：通过CSS类名绑定事件

给checkbox添加一个专属类名，放弃ID选择器，避免冲突。

<s:hidden name="checkActes" id="checkActes"></s:hidden>
 
<s:checkbox id="checkActes" labelposition="left" cssClass="block-left check actes-checkbox" 
label="%{getText('prestationPsDto.actes')}" key="prestationPsDto.actesSpec"/>  

修改JS代码，通过类名选择元素，并用$(this)指代当前点击的元素：

$('.actes-checkbox').on('click',function() {
    console.log("kjfffkj");
    if($(this).is(':checked')){
        console.log("kjkj")
        $("#cleCotation").show()
    }
    else{
        $("#cleCotation").hide()
        $('#cleCotation').find("input,select").val('');
    }
}); 

方案3：通过name属性选择元素

如果checkbox的name（即key对应的prestationPsDto.actesSpec）是唯一的，可直接用name选择器定位：

$('input[name="prestationPsDto.actesSpec"]').on('click',function() {
    console.log("kjfffkj");
    if($(this).is(':checked')){
        console.log("kjkj")
        $("#cleCotation").show()
    }
    else{
        $("#cleCotation").hide()
        $('#cleCotation').find("input,select").val('');
    }
}); 

此方案无需修改JSP标签，直接通过后端参数对应的name定位目标元素。

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