jQuery と html と css で複数選択可能なボタンを作る

かしこ 35views 更新:2016年10月4日

タイトル通り、複数選択可能なボタンを作ろうと思い作成しました。

とりあえず、ボタンを押したら今押されているボタンのIDを取得して画面に表示させています。

※ 細かいバグがあるかも

■ index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <link rel="stylesheet" type="text/css" href="button.css">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script>
        <script src="button.js"></script>
        <title>ボタン</title>
    </head>
    <body>
        <div id="list_area" >
            <ul style="list-style-type: none">
                <!-- ここがボタンになる領域 -->
                <li id="id_1" class="list_item">ボタン1</li>
                <li id="id_2" class="list_item">ボタン2</li>
                <li id="id_3" class="list_item">ボタン3</li>
            </ul>
        </div>
        <div>選択中:<span id="check_item"></span></div>
    </body>
</html>

■ button.js

toggleClass を使いたかったんですよね。

$(function()
{
    // 定数用
    var CHECKED_CLASS = "checked" ;
    // 変数用
    var
      check_array = []
    , ltem_count  = 0
    , for_count   = 0
    , check_text  = ""
    , e_target    = []
    ;
    $(".list_item").on("click", function(e)
    {
        e_target = $(e.target) ;
        e_target.toggleClass(CHECKED_CLASS) ;
        // checked が付加されている項目の id を配列に追加、無い項目は配列から除去
        if(e_target.hasClass(CHECKED_CLASS)) {
            check_array.push(e_target.attr("id")) ;
        } else {
            for_count = 0 ;
            for(; for_count < ltem_count ; for_count++) {
                if(e_target.attr("id") == check_array[for_count]) {
                    check_array.splice(for_count, 1) ;
                }
            }
        }
        // 画面に選択されている項目を表示させる
        ltem_count = check_array.length ;
        for_count  = 0 ;
        check_text = "" ;
        for(; for_count < ltem_count ; for_count++) {
            // 最初の一つ目以外は前に , をつけて区切る
            if(for_count !== 0) check_text += ", " ;
            check_text += check_array[for_count] ;
        }
        $("#check_item").text(check_text) ;
    })
})

■ button.css

hover は辞めました。

@CHARSET "UTF-8" ;
.list_item
{
    margin : 2px ;
    padding : 5px 10px 5px 10px ;
    border-radius : 10px ;
    text-align : center ;
    background : #DDDDDD ;
    display : inline-block ;
}
.list_item:active
{
    background : #555555 ;
}
.checked
{
    color : #FFFFFF ;
    background : #888888 ;
}

そういえば、 jQuery が 3.1.1 にバージョンアップしましたね(今更)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません