javascript - 以编程方式检查单选按钮并非在所有浏览器中均有效

我需要根据URL中的路径检查单选按钮。

$(document).ready(function () {
    function make_url() {
        var results_url = window.location.pathname.split("/");

        console.log(results_url); // ["", "tradeshows"]

        if (results_url[1] == "tradeshows") {
            $("#radio2").attr('checked', 'checked');
        } else if (results_url[2] == "tradeshows") {
            $("#radio2").attr('checked', 'checked');
        }
    }
});

<ul class="cd-filter-content cd-filters list" id="radioButtons" onChange="make_url();" style="display: block; padding:0px;">
    <li>
        <input type="radio" checked="" id="radio1" name="radioButton" value="" data-filter=".radio2" class="filter">
        <label for="radio1" class="radio-label">All Events</label>
    </li>
    <li>
        <input type="radio" id="radio2" name="radioButton" data-filter=".radio3" class="filter" value="1">
        <label for="radio2" class="radio-label" id="trade">Trade Shows</label>
    </li>
</ul>

该代码在我的本地文件系统上工作正常，但在服务器上却无法正常工作。

当我从控制台尝试时，everytrhing可以正常工作：

$("#radio2").attr('checked','checked');

我也用香草JavaScript尝试过：

document.getElementById('radio2').checked = true;
console.log(document.getElementById('radio2').checked); // false

我使用jQuery尝试了另一种解决方案：

$('#radio2').prop('checked', true); // Uncaught TypeError: Cannot set property 'checked' of null

最佳答案

如果出现以下错误。

  Uncaught TypeError: Cannot set property 'checked' of null

然后，jQuery将$('#radio2')返回为空，尝试记录$('#radio2')并在控制台中检查它是否返回任何值。

导致该错误的主要原因是，当函数执行时，id为radio2的元素不存在，如果在加载DOM之前执行该函数，则可能会出错。

正如您提到的，它在本地计算机上运行良好，并且在服务器上不运行，服务器的响应时间比本地计算机慢一点，因此该元素不会被加载，并且在脚本加载之前。

请提供完整的代码说明。