javascript - JS函数不改变地址栏中的URL

Question

我试图设计一个锻炼网站，该网站根据用户选择从数据库返回练习。我正在编写一些测试代码，如果选中“Arms”复选框，则单击按钮时将更改地址栏中的 URL。但是，它似乎不起作用，因此您可以提供的任何帮助将不胜感激:

JavaScript

<script>
function getSelection(){
    if(document.getElementById('armsCheck').is(':checked')){
        window.location.search = "";
        window.location.href = window.location.href + "?bodypart=Arms";
    }else{
        return;
    }
}
</script>

HTML

<form>
<input type="checkbox" id="armsCheck" />Arms<br />
<input type="button" value="Submit" onClick="getSelection()" />
</form>

Answer 1

您正尝试在 DOM 对象上调用 jQuery is() 方法，但该对象没有该方法。如果您查看浏览器的 JavaScript 控制台，这一点就会很明显。

改为检查checked 属性。

if(document.getElementById('armsCheck').checked){

<小时/>

同时替换这些行:

window.location.search = "";
window.location.href = window.location.href + "?bodypart=Arms";

与:

window.location.search = "?bodypart=Arms";

因为第一行会在到达第二行之前触发页面重新加载。

<小时/>

不过根本不需要涉及 JavaScript。您可以使用纯 HTML 获得相同的效果。

<form>
    <label><input type="checkbox" name="bodypart" value="Arms"> Arms</label>
    <input type="submit" value="Submit">
</form>