用于将值从复选框传递到查询字符串的 JavaScript 无法正常工作

JavaScript for passing value from check box to query-string Not Working Properly

本文关键字：JavaScript 常工作工作字符串复选框查询用于更新时间：2023-09-26

我正在使用javascript。但它无法正常工作。JavaScript 用于将复选框中的值传递到查询字符串。

这是我的代码，请帮我找到错误。

<script type="text/javascript">
    function GetOS() {
        $('input[type="checkbox"]').on('change', function (e) {
            var data = {},
                fdata = [],
                loc = $('<a>', { href: window.location })[0];
            $('input[type="checkbox"]').each(function (i) {
                if (this.checked) {
                    if (!data.hasOwnProperty(this.name)) {
                        data[this.name] = [];
                    }
                    data[this.name].push(this.value);
                }
            });
            $.each(data, function (k, v) {
                fdata[k] = [v.join(',')];
            });
            fdata = fdata.join('&');
            $.post('/ajax-post-url/', fdata);
            if (history.pushState) {
                history.pushState(null, null, loc.pathname + '?' + fdata);
            }
        });
    }
    window.onload = GetOS;
</script>

            <div class="panel-body">
            <div class="rowElem">
              <input type="checkbox" name="chbox" id="" value="Color #1" />
              <label>Color #1</label>
            </div>
            <div class="rowElem">
              <input type="checkbox" name="chbox" id="" value="Color #2" />
              <label>Color #2</label>
            </div>
            <div class="rowElem">
              <input type="checkbox" name="chbox" id="" value="Color #3" />
              <label>Color #3</label>
            </div>
          </div>

试试这个：

<script type="text/javascript">
    function GetOS() {
        console.log("rom");
        $('input[type="checkbox"]').on('change', function (e) {
            var data = {},
                fdata = [],
                loc = $('<a>', { href: window.location })[0];
            $('input[type="checkbox"]').each(function (i) {
                if (this.checked) {
                    if (!data.hasOwnProperty(this.name)) {
                        data[this.name] = [];
                    }
                    data[this.name].push(this.value);
                }
            });
            // get the key
            var key = Object.keys(data)[0];
            // and the data
            // it works to without joining
            var fdata = key+"="+data[key].join(',');
            // and if you wanna strip the whitespaces
            // use fdata = fdata.replace(/'s/g,"");
            $.post('/ajax-post-url/', fdata);
            if (history.pushState) {
                history.pushState(null, null, loc.pathname + '?' + fdata);
            }
        });
    }
    window.onload = GetOS;
</script>

这也行得通

<script type="text/javascript">
    function GetOS() {
        $('input[type="checkbox"]').on('change', function (e) {
            var data = {},
                fdata = [],
                qs = "",
                loc = $('<a>', { href: window.location })[0];
            $('input[type="checkbox"]').each(function (i) {
                if (this.checked) {
                    if (!data.hasOwnProperty(this.name)) {
                        data[this.name] = [];
                    }
                    data[this.name].push(this.value);
                }
            });
            $.each(data, function (k, v) {
                fdata.push(k + "=" + v.join(','));
            });
            qs = fdata.join('&');
            $.post('/ajax-post-url/', fdata);
            if (history.pushState) {
                history.pushState(null, null, loc.pathname + '?' + qs);
            }
        });
    }
    window.onload = GetOS;
</script>