JavaScript 从表单元素处理复选框创建 URL

javascript create url from form elements handling checkboxes

本文关键字：复选框 创建 URL 处理 元素 表单 JavaScript      更新时间：2023-09-26

所以我一直在使用这个通用代码从表单元素创建一个 URL

function submiturl() {
    url="Search.do?call=JS"; 
    var elem = document.getElementById('searchInput').elements;
    for(var i = 0; i < elem.length; i++) {
        url = url + "&" + escape(elem[i].name) + "=" + escape(elem[i].value);
    }
    url = url.substring(0,(url.length-1));
   alert(url);
}

但是它不能正确处理复选框 - 如果选中复选框，我只想添加到 URL。 所以如果你有这个html

<html>
<body>
<form name="searchInput" id ="searchInput">
    <input name="first" type="checkbox" value="123"/>One two three
    <input name="second" type="checkbox" value="456"/>Four five six
    <button type="button" onClick="submiturl();">Submit</button>
</form>
</body>
</html>

它将使用两个复选框的值创建 URL，无论它们是否被选中。

那么我如何修改我的 javascript 以检查它是否是一个复选框并且被选中了呢？

谢谢！

在你的 for 循环中，这样做：

if (elem[i].type != "checkbox" || elem[i].checked)
    url = url + ...

function submiturl() {
    var url="Search.do?call=JS", 
        els = document.getElementById("searchInput").elements
    ;
    for(var el, i = 0, n = els.length; i < n; i++) {
        el = els[i];
        if (el.checked || el.type !== "checkbox") {
            url += "&" + encodeURIComponent(el.name) + 
                   "=" + encodeURIComponent(el.value)
            ;
        }
    }
    alert(url);
}

它是一个复选框吗？

typeof elem[i].attributes['type'] != 'undefined' &&
elem[i].attributes['type'].value == 'checkbox'

检查了吗？

typeof elem[i].attributes['checked'] != 'undefined' &&
elem[i].attributes['checked'].value == 'checked'
相关文章：