チェックボックスで選択した値をパラメータとしてURLに表示する

簡易の検索などに使用。

■設定内容
◯html

<form method="get" action="<?php echo SITEROOT;?>list/">
  <input type="checkbox" id="（ID_A）" name="（パラメータ名）" value="（パラメータ値）"><label for="（ID_A）">ラベル</label>
  <input type="checkbox" id="（ID_B）" name="（パラメータ名）" value="（パラメータ値）"><label for="（ID_B）">ラベル</label>
  <input type="checkbox" id="（ID_C）" name="（パラメータ名）" value="（パラメータ値）"><label for="（ID_C）">ラベル</label>
  <input type="submit" class="btn" value="絞り込む"/>
</form>

◯js

(function() {
    $("#searchMenu li").hover(function() {
        $(this).children('ul').show();
    }, function() {
        $(this).children('ul').hide();
    });
    // modal高さ取得
    modalHeight();
    $(window).resize(function(){
        modalHeight();
    });


    try{
        document.addEventListener ('submit',function(e){func(e)},true);
    }catch(e){
        document.attachEvent('onsubmit',function(e){func(e)});
    }
    function func(e){
        var t = (e.srcElement || e.target);
        if(t.nodeName=="FORM"){
            var args=new Object();
            for(var i=0;i<t.length;i++){
                if(t[i].name && t[i].checked){
                    if(!args[t[i].name]){
                        args[t[i].name]=t[i].name+"="+t[i].value;
                    }else{
                        args[t[i].name]+=","+t[i].value;
                    }
                }
            }
        }
        var url="";
        for(var i in args){
            url+=(url==""?"":"&")+args[i];
        }
        url=t.action+(url==""?"":"?"+url);
        location.href=url;
        e.preventDefault();
    }
}());

■参考元ソース

<script>
    try{
        document.addEventListener ('submit',function(e){func(e)},true);
    }catch(e){
        document.attachEvent('onsubmit',function(e){func(e)});
    }
    function func(e){
        var t = (e.srcElement || e.target);
        if(t.nodeName=="FORM"){
            var args=new Object();
            for(var i=0;i<t.length;i++){
                if(t[i].name && t[i].checked){
                    if(!args[t[i].name]){
                        args[t[i].name]=t[i].name+"="+t[i].value;
                    }else{
                        args[t[i].name]+=","+t[i].value;
                    }
                }
            }
        }
        var url="";
        for(var i in args){
            url+=(url==""?"":"&")+args[i];
        }
        url=t.action+(url==""?"":"?"+url);
        location.href=url;
        e.preventDefault();
    }
</script>

<form method="get" action="./">
<input type="checkbox" name="hoge" value="1">hoge1
<input type="checkbox" name="hoge" value="2">hoge2
<input type="checkbox" name="hoge" value="3">hoge3
<input type="checkbox" name="fuga" value="1">fuga1
<input type="checkbox" name="fuga" value="2">fuga2
<input type="checkbox" name="fuga" value="3">fuga3
<input type="submit" value="送信" />
</form>

参考サイト

OKWAVE

HTMLフォームで複数選択のチェックボックスの値をまとめてから送信したい

https://okwave.jp/qa/q5531235.html