checkboxは不要！リストの中から項目を複数選択してformで送信する

input type=”checkbox”を使わずにリストの中から項目を複数選択して選択されたものだけformで送信する方法

php関連記事

formのhtml

html

<form action="" method="post">
    <ul id="select">
        <li class="target" data-code="1">code : 1</li>
        <li class="target" data-code="2">code : 2</li>
        <li class="target" data-code="3">code : 3</li>
        <li class="target" data-code="4">code : 4</li>
    </ul>
    <button type="submit" id="btn">送信</button>
</form>

input type=”checkbox”って送信データみるのがめんどくさいよねーっていつも思ってました。
項目が増えるほどめんどくさい。

なんで選択されたものだけを送信したらすっきりすると思い作ってみました。

選択肢のリストはulで作ってます。そこにdata-codeの値にその項目のidなどをいれます。
sqlで使えるようにユニークなものにします。

選択状態を判別するjs

$(function(){
    $(".target").click(function(){
        $(this).toggleClass('choose');
    });
    
    $("#btn").click(function(){
        $("ul#select li").each(function(){
            var classnm = $(this).attr('class');
            
            if (classnm == "target choose") {
                var idnm = $(this).data('code');
                $(this).append('<input type="hidden" name="selected[]" value="'+idnm+'">');
            }
        });
        $("#btn").submit();
    });
});

まずはliをクリックしたときにchooseのクラスを付与します。
これがついていれば選択されている状態ってことですね。

当然、ただのliなんでクラスがついただけではcheckboxのように見た目が変わらないのでcssで.target.chooseのborderやbackgroundの色を変更すると視覚的にわかりやすいです。

送信ボタンが押されたときに、すべてのliのクラスを見に行きます。

その中でクラスがtarget chooseの場合、対象のdata-codeを取りに行きます。

さらにinput type=”hidden”で送信用のデータをにdata-codeの値をセットします。
ここでのポイントがname=”selected[]”とすることで送信されたselectedの値を配列で受け取れます。

送信したのは必要なデータのみが入った配列。
なので受け取ったphpでforeachとかでループさせれば簡単に選択したものだけが取り出せます。

これを使えばsqlのDELETEも、項目が少なければINSERT、UPDATEも簡単ですね！