html表单:漂亮的url查询的复选框组

Question

我有以下搜索表单：

每个字段都是一个复选框，因此每个组都是可多选的

<form action="search">

    <fieldset id="type">
        <legend>Offer type:</legend>
        <input type="checkbox" name="full" id="checkbox-01" /> <label for="checkbox-01">Full Time</label>
        <input type="checkbox" name="part" id="checkbox-02" /> <label for="checkbox-02">Part time</label>
        <input type="checkbox" name="internship" id="checkbox-03" /> <label for="checkbox-03">Internship</label>
        <input type="checkbox" name="other" id="checkbox-04" /> <label for="checkbox-04">Other</label>

    </fieldset>

    <fieldset id="jobs">
        <legend>Jobs:</legend>
        <input type="checkbox" name="plumber" id="checkbox-1" /> <label for="checkbox-1">Plumber</label>
        <input type="checkbox" name="baker" id="checkbox-2" /> <label for="checkbox-2">Baker</label>
        <input type="checkbox" name="tester" id="checkbox-3" /> <label for="checkbox-3">Tester</label>
        <input type="checkbox" name="engineer" id="checkbox-4" /> <label for="checkbox-4">Engineer</label>

    </fieldset>

    <input type="submit" value="Search" />
</form>

但不是让

http://...../search?full=on&other=on&tester=on&engineer=on 

作为url查询字符串

我想要：

http://...../search?type=full+other&jobs=tester+engineer

这对于解析服务器端更具可读性，也更有用

当然，我不能为复选框添加相同的name属性，有没有我可以做的技巧，或者唯一的解决方案是在按钮单击时执行javascript？

thx

Answer 1

使用了以下技巧：

<input type="checkbox" name="cat[]" />

Answer 2

您可以使用onSubmit()方法解析表单属性，然后更改文档上的位置。

但是如果可以的话，可以考虑使用post提交类型来隐藏查询字符串，而不是get，如果这是一个美学问题。