1

我正在尝试从具有特定顺序的表单中序列化复选框值。变量必须遵循字母顺序。只要尊重变量顺序，值顺序就无关紧要。

这是小提琴

这是html表单：

<form>
    <input type="checkbox" value="value1"/>
    <input type="checkbox" value="value2"/>
    <input type="checkbox" value="value3"/>
    <input type="checkbox" value="value4"/>
    <input type="checkbox" value="value5"/>
    <input type="checkbox" value="value6"/>
    <input type="checkbox" value="value7"/>
    <input type="checkbox" value="value8"/>
    <input type="checkbox" value="value9"/>
    <input type="checkbox" value="value10"/>
</form>
<p id="results"></p>​

这是jQuery脚本：

$(document).ready(function(){
    $("input:checkbox").change(function(){
      var checked = $("input:checked").size();
      var name_a = $("input:checked[name=a]").size();
      var name_b = $("input:checked[name=b]").size();
      var name_c = $("input:checked[name=c]").size();
      var name_d = $("input:checked[name=d]").size();
      var name_e = $("input:checked[name=e]").size();

      if(name_a<1){
        $(this).attr("name","a");
      }else if(name_b<1){
        $(this).attr("name","b");
      }else if(name_c<1){
        $(this).attr("name","c");
      }else if(name_d<1){
        $(this).attr("name","d");
      }else if(name_e<1){
        $(this).attr("name","e");
      };

      if (checked>5) {
        $(this).attr("checked", false);
      } 
    });

    function showValues() {
      str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox").click(showValues);
    $("select").change(showValues);
    showValues();
});​

我的期望：

a=valueX    or...
a=valueX&b=valueX  or...
a=valueX&b=valueX&c=valueX  or...
a=valueX&b=valueX&c=valueX&d=valueX  or...
a=valueX&b=valueX&c=valueX&d=valueX&e=valueX

我不想要的：

b=valueX  or...
b=valueX&a=valueX  or...
a=valueX&c=valueX  or...
b=valueX&a=valueX&c=valueX&d=valueX&e=valueX

我希望你能明白我在找什么。任何帮助将不胜感激！

注意：尝试随机检查和取消检查输入以确保代码按预期工作。

4

1 回答 1

0

如果我很好地理解了这个问题，请告诉我：

$(document).ready(function(){
    $("input:checkbox").change(function(){
        var $checked = $(":checked");
        if( $checked.length > 5 ) {
            $(this).removeAttr("checked");
            return;
        }
        $checked.siblings()
            .andSelf().removeAttr("name");
        $checked.each( function(i, o) {
            $(this).attr("name", String.fromCharCode(97+i));
        });
        showValues();
    });

    function showValues() {
      str = $("form").serialize();
      $("#results").text(str);
    }
    /*$(":checkbox").click(showValues);
    $("select").change(showValues);*/
    showValues();
});​

jsfiddle

于 2012-11-15T22:15:53.713 回答