Question

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

$(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>

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

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

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

我也尝试过使用vanilla 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

Answer 1

如果您收到以下错误。

  Uncaught TypeError: Cannot set property 'checked' of null

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

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

正如您所提到的，它在本地计算机上工作正常并且无法在服务器上运行，服务器的响应时间比本地计算机慢，因此该元素在加载之前没有加载。

请提供完整的代码说明。

Answer 2

您的代码并没有多大意义。函数make_url根据URL中给定的路径名更改单选按钮，但只有在ul被更改时才会触发该函数，由于此事件未实现，因此永远不会发生。

如果删除不必要的make_url功能，则只要文档加载（准备就绪），就会设置单选按钮：

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

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

<ul class="cd-filter-content cd-filters list" id="radioButtons" 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>

我还简化了你的if语句，因为你检查了单选按钮，路径名的第二个或第三个组成部分等于＆＃34; tradeshows＆＃34;。

以编程方式检查单选按钮在每个浏览器中都不起作用

2 个答案: