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 に答える