Javascript Jquery用于PHP的多个复选框数组

大家好，我对jquery有问题。对不起，我的英语不好。我找了几个小时的解决方案，什么也没找到。我想用jQuery做的是在选中并提交复选框时编辑参数

如果我选中所有复选框并单击过滤器应用。URL的格式如下

我需要创建如下URL：

（如果我选中所有复选框并提交。）

因为我想用php分解这些值并将它们放入查询中

谢谢大家的帮助

<form id="form" method="GET" action="filter.php">
<fieldset class="right-side">
    <legend>Rarity</legend>
    <div id="test">
      <ul>
        <li>
        <input type="checkbox" id="rfilter" name="rfilter" value="1" />
        <label for="rfilter">Common</label>
        </li>
        <li>
        <input type="checkbox" id="rfilter" name="rfilter" value="2" />
        <label for="rfilter">Free</label>
        </li>
      </ul>
    </div>
</fieldset>
<fieldset class="right-side">
    <legend>Color</legend>
    <div id="test">
        <ul>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="1"/>
            <label for="cardfilter">Netural</label>
            </li>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="2"/>
            <label for="cardfilter">Green</label>
            </li>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="3"/>
            <label for="cardfilter">Red</label>
            </li>
        </ul>
    </div>
</fieldset>
<fieldset class="right-side">
    <legend>Size</legend>
    <div id="test">
        <ul>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="1"/>
            <label for="sfilter">Big</label>
            </li>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="2"/>
            <label for="sfilter">Normal</label>
            </li>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="3"/>
            <label for="sfilter">Small</label>
            </li>
        </ul>
    </div>
    </fieldset>
<input type="submit" id="filterapply" value="Filter Apply" />
</form>

稀有


普通的


自由的


颜色


尼图拉


绿色


红色


大小


大的


正常的


小的

***编辑***

<form id="form" method="POST" action="filter.php">
<fieldset class="right-side">
    <legend>Rarity</legend>
    <div id="test">
      <ul>
        <li>
        <input type="checkbox" id="rfilter" name="rfilter" value="1" />
        <label for="rfilter">Common</label>
        </li>
        <li>
        <input type="checkbox" id="rfilter" name="rfilter" value="2" />
        <label for="rfilter">Free</label>
        </li>
      </ul>
    </div>
</fieldset>
<fieldset class="right-side">
    <legend>Color</legend>
    <div id="test">
        <ul>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="1"/>
            <label for="cardfilter">Netural</label>
            </li>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="2"/>
            <label for="cardfilter">Green</label>
            </li>
            <li>
            <input type="checkbox" id="cfilter" name="cfilter" value="3"/>
            <label for="cardfilter">Red</label>
            </li>
        </ul>
    </div>
</fieldset>
<fieldset class="right-side">
    <legend>Size</legend>
    <div id="test">
        <ul>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="1"/>
            <label for="sfilter">Big</label>
            </li>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="2"/>
            <label for="sfilter">Normal</label>
            </li>
            <li>
            <input type="checkbox" id="sfilter" name="sfilter" value="3"/>
            <label for="sfilter">Small</label>
            </li>
        </ul>
    </div>
    </fieldset>
<input type="submit" id="filterapply" value="Filter Apply" />
</form>
 <script type="text/javascript">
var executeSubmit = false;
var parameters = {};
jQuery('#form').submit(function(e){
if(!executeSubmit){
   e.preventDefault();
   var parameter = '';
   jQuery('input[type=checkbox]:checked').each(function(){
    var name = jQuery(this).attr('name');
    if(typeof parameters[name] == 'undefined'){
        parameters[name] = [];
    }
    parameters[name].push(jQuery(this).val());
   });

   for(key in parameters){
   parameter += parameter == '' ? '' : '&';
   parameter += key + '=' + parameters[key].join().replace(/\,/g,':');
   }
   console.log(parameter);
  jQuery(this).attr('action', jQuery(this).attr('action') + '?' + parameter);
  executeSubmit = true;
  jQuery(this).trigger('submit');
}
});
</script>

稀有


普通的


自由的


颜色


尼图拉


绿色


红色


大小


大的


正常的


小的


var executeSubmit=false；
var参数={}；
jQuery（“#表单”）.submit（函数（e）{
如果（！executeSubmit）{
e、 预防默认值（）；
var参数=“”；
jQuery（'input[type=checkbox]：checked'）。每个（函数（）{
var name=jQuery（this.attr（'name'）；
if（参数类型[名称]=='未定义'）{
参数[名称]=[]；
}
参数[name].push（jQuery（this.val（））；
});
用于（输入参数）{
参数+=参数==''？''：''&'；
参数+=key+'='+参数[key].join（）.replace（/\，/g'，：'）；
}
console.log（参数）；
jQuery（this.attr（'action'，jQuery（this.attr（'action'）+'？'+参数）；
executeSubmit=true；
jQuery（this.trigger（'submit'）；
}
});

在这里，我刚刚为您编写了整个代码，它工作正常。您可以使用$\u GET['cfilter']在php中访问变量，因为您希望它位于操作url中

我刚刚编写了这段代码，这是你想要的，并像你描述的那样放在url中。

给你，我的朋友。从我的一个项目复制粘贴

<form id="form" method="post" action="/url" >

    Group 1
    <input type="checkbox" name="filter_a[]" value="1">
    <input type="checkbox" name="filter_a[]" value="2">
    <input type="checkbox" name="filter_a[]" value="3">

    Group 2
    <input type="checkbox" name="filter_b[]" value="1">
    <input type="checkbox" name="filter_b[]" value="2">
    <input type="checkbox" name="filter_b[]" value="3">

    Group 3
    <input type="checkbox" name="filter_c[]" value="1">
    <input type="checkbox" name="filter_c[]" value="2">
    <input type="checkbox" name="filter_c[]" value="3">

    <input type="submit" id="filterapply" value="Filter Apply" />

</form>

第一组
第2组
第3组

js:

var hasClass=函数（元素，类名）{
return（newregexp（“（|^）”+className+“（|$）”，“g”））.test（element.className）；
};
var form=document.getElementById（'form'）；
变量字段值={
allReg:/\[（[a-zA-Z0-9-]*）\]/g，
isObjReg:/\[（.*）\]/g，
序列化：函数（a，b）{
var c=[]；
用于（a中的变量d）{
变量e=b？b+“[”+d+“]”：d，f=a[d]；
c、 push（“object”==typeof f？fieldValue.serialize（f，e）：encodeURIComponent（e）+“=”+encodeURIComponent（f））
}
返回c.join（&）
},
get：函数（字段名、引用）{
var arr=[fieldName.replace（fieldValue.isObjReg'，）]；
var匹配；
while（match=fieldValue.allReg.exec（fieldName））{
arr.push（匹配[1]）；
}
if（reference==undefined）返回undefined；
if（reference[arr[0]]==未定义）返回未定义；
var tmpObj=参考值；
对于（变量i=0；ivar hasClass = function(element, className) {
    return (new RegExp("( |^)" + className + "( |$)", "g")).test(element.className);
};

var form = document.getElementById('form');

var fieldValue = {
    allReg : /\[([a-zA-Z0-9-]*)\]/g,
    isObjReg : /\[(.*)\]/g,
    serialize: function (a, b) {
        var c = [];
        for (var d in a) {
            var e = b ? b + "[" + d + "]" : d, f = a[d];
            c.push("object" == typeof f ? fieldValue.serialize(f, e) : encodeURIComponent(e) + "=" + encodeURIComponent(f))
        }
        return c.join("&")
    },
    get : function(fieldName, reference) {
        var arr = [fieldName.replace(fieldValue.isObjReg, '')];
        var match;
        while (match = fieldValue.allReg.exec(fieldName)) {
            arr.push(match[1]);
        }

        if (reference === undefined) return undefined;
        if (reference[arr[0]] === undefined) return undefined;

        var tmpObj = reference;

        for (var i = 0; i < arr.length; i++) {
            if (tmpObj[arr[i]] !== undefined) {
                if (tmpObj[arr[i]] == '') return tmpObj[arr[i]];
                tmpObj = tmpObj[arr[i]]
            }
        }

        return tmpObj;
    },
    set : function(fieldName, value, reference, hard) {
        hard = hard || !1;

        var arr = [fieldName.replace(fieldValue.isObjReg, '')];
        var match;
        while (match = fieldValue.allReg.exec(fieldName)) {
            arr.push(match[1]);
        }

        if (reference === undefined) return undefined;

        var tmpObj = reference;

        for (var i = 0; i < arr.length; i++) {
            if (arr[i+1] != undefined) {
                if (arr[i+1] == '') {
                    tmpObj[arr[i]] = tmpObj[arr[i]] || [];
                    if (hard) {
                        tmpObj[arr[i]] = value;
                    } else {
                        tmpObj[arr[i]].push(value);
                    }
                } else {
                    tmpObj[arr[i]] = tmpObj[arr[i]] || {};
                }
                tmpObj = tmpObj[arr[i]];
            } else if (arr[i] != '') {
                tmpObj[arr[i]] = value;
            }
        }
    }
};
function bind(obj, evt, fnc) {
    // W3C model
    if (obj.addEventListener) {
        obj.addEventListener(evt, fnc, !1);
        return !0;
    }
    // Microsoft model
    else if (obj.attachEvent) {
        return obj.attachEvent('on' + evt, fnc);
    }
    // Browser don't support W3C or MSFT model, go on with traditional
    else {
        evt = 'on'+evt;
        if(typeof obj[evt] === 'function'){
            // Object already has a function on traditional
            // Let's wrap it with our own function inside another function
            fnc = (function(f1,f2){
                return function(){
                    f1.apply(this,arguments);
                    f2.apply(this,arguments);
                }
            })(obj[evt], fnc);
        }
        obj[evt] = fnc;
        return !0;
    }
}

var submit = function(data, callback) {
    callback = callback || function() {};

    var request = new XMLHttpRequest();

    request.open(form.getAttribute('method') || "POST", form.action);
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    request.setRequestHeader('X-Requested-With','XMLHttpRequest');
    request.send(fieldValue.serialize(data, null));

    request.onreadystatechange = function() {
        if (request.status == 200 && request.readyState == 4) {
            callback(request.response);
        }
        if (request.status != 200) {
            // errorCallback()
        }
    };

    return !0;
};

function formToArray(form, emptyFields) {
    var elements = form.elements;
    var result = {};

    if (!elements) {
        return result;
    }

    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var name = element.name;

        var getFieldValue = function (elem) {
            var name = elem.name, type = elem.type, tag = elem.tagName.toLowerCase();

            if (!name || elem.disabled || type == 'reset' || type == 'button' ||
                (type == 'checkbox' || type == 'radio') && !elem.checked ||
                (type == 'submit' || type == 'image') && elem.form && elem.form.clk != elem ||
                tag == 'select' && elem.selectedIndex == -1) {
                return null;
            }

            switch (tag) {
                case 'select':
                    var index = elem.selectedIndex;
                    if (index < 0) {
                        return null;
                    }
                    var a = [], ops = elem.options;
                    var one = (type == 'select-one');
                    var max = (one ? index + 1 : ops.length);
                    for (var i = (one ? index : 0); i < max; i++) {
                        var op = ops[i];
                        if (op.selected) {
                            var v = op.value;
                            if (!v) {  /* IE fix */
                                v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
                            }
                            if (one) {
                                return v;
                            }
                            a.push(v);
                        }
                    }
                    return a;
                case 'input':
                    switch (type) {
                        case 'radio':
                            return elem.value === '' ? null : elem.value;
                        case 'checkbox':
                            if (!elem.hasAttribute('value')) {
                                return 1;
                            }
                            return elem.value === '' ? 1 : elem.value;
                        case 'text':
                        case 'password':
                        case 'hidden':
                            return elem.value === '' ? null : elem.value;
                            break;
                    }
                    break;
                case 'textarea':
                    return elem.value === '' ? null : elem.value;
            }

            return !1
        };

        if (!name || element.disabled || hasClass(element, 'default-text')/* || element.hasAttribute('disabled')*/) {
            continue;
        }

        if (emptyFields && fieldValue.get(name, result) === undefined) {
            fieldValue.set(name, null, result);
        }

        var value = getFieldValue(element);

        if (value === null) {
            continue;
        }

        if (!emptyFields && (value === '' || value === null || value === undefined)) continue;

        if (element.hasAttribute('bitmask')) {
            value = parseInt(value, 10) || 0;
            if (value !== 0 || emptyFields) {
                result[name] |= value;
            }
            continue;
        }

        fieldValue.set(name, value, result);
    }

    return result;
}

function processData(data) {
    console.log(data);
    var res = {};
    for (var i in data) {
        res[i] = data[i].join(':');
    }
    return res
}

form.submit = function() {
    submit(
        processData(formToArray(form, false))
    );
};

bind(form, 'submit', function(e) {
    if(e.preventDefault) e.preventDefault();
    submit(
        processData(formToArray(form, false))
    );
    e.returnValue = !1;
    return !1;
});