Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>


<div id="arr">都道府県を選択してください<br>※表示したい例</div>

<center>
    <input type="button" id="reset" value="リセット">
    <input type="button" id="all" value="全国">
    <input type="button" id="onoff" value="地域選択">
</center>

<div id="prefecture">都道府県を選択してください</div>


<div class="japan_map">
    <img src="https://frame-illust.com/fi/wp-content/uploads/2015/02/2fb0260f7a6523c60b142721e8191baf.png" alt="日本地図">
    <span class="area_btn area1" data-area="1">北海道・東北</span>
    <span class="area_btn area2" data-area="2">関東</span>
    <span class="area_btn area3" data-area="3">中部</span>
    <span class="area_btn area4" data-area="4">近畿</span>
    <span class="area_btn area5" data-area="5">中国・四国</span>
    <span class="area_btn area6" data-area="6">九州</span>

    <div class="area_overlay"></div>
    <div class="pref_area">
        <div class="pref_list" data-list="1">
            <div data-id="北海道">
                <label><input id="%E5%8C%97%E6%B5%B7%E9%81%93" type="checkbox" name="pref" value="北海道">北海道</label>
            </div>
            <div data-id="青森県">
                <label><input id="%E9%9D%92%E6%A3%AE%E7%9C%8C" type="checkbox" name="pref" value="青森県">青森県</label>
            </div>
            <div data-id="岩手県">
                <label><input id="%E5%B2%A9%E6%89%8B%E7%9C%8C" type="checkbox" name="pref" value="岩手県">岩手県</label>
            </div>
            <div data-id="宮城県">
                <label><input id="%E5%AE%AE%E5%9F%8E%E7%9C%8C" type="checkbox" name="pref" value="宮城県">宮城県</label>
            </div>
            <div data-id="秋田県">
                <label><input id="%E7%A7%8B%E7%94%B0%E7%9C%8C" type="checkbox" name="pref" value="秋田県">秋田県</label>
            </div>
            <div data-id="山形県">
                <label><input id="%E5%B1%B1%E5%BD%A2%E7%9C%8C" type="checkbox" name="pref" value="山形県">山形県</label>
            </div>
            <div data-id="福島県">
                <label><input id="%E7%A6%8F%E5%B3%B6%E7%9C%8C" type="checkbox" name="pref" value="福島県">福島県</label>
            </div>
            <div></div>
        </div>

        <div class="pref_list" data-list="2">
            <div data-id="茨城県">
                <label><input id="%E8%8C%A8%E5%9F%8E%E7%9C%8C" type="checkbox" name="pref" value="茨城県">茨城県</label>
            </div>
            <div data-id="栃木県">
                <label><input id="%E6%A0%83%E6%9C%A8%E7%9C%8C" type="checkbox" name="pref" value="栃木県">栃木県</label>
            </div>
            <div data-id="群馬県">
                <label><input id="%E7%BE%A4%E9%A6%AC%E7%9C%8C" type="checkbox" name="pref" value="群馬県">群馬県</label>
            </div>
            <div data-id="埼玉県">
                <label><input id="%E5%9F%BC%E7%8E%89%E7%9C%8C" type="checkbox" name="pref" value="埼玉県">埼玉県</label>
            </div>
            <div data-id="千葉県">
                <label><input id="%E5%8D%83%E8%91%89%E7%9C%8C" type="checkbox" name="pref" value="千葉県">千葉県</label>
            </div>
            <div data-id="東京都">
                <label><input id="%E6%9D%B1%E4%BA%AC%E9%83%BD" type="checkbox" name="pref" value="東京都">東京都</label>
            </div>
            <div data-id="神奈川県">
                <label><input id="%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C" type="checkbox" name="pref" value="神奈川県">神奈川県</label>
            </div>
            <div></div>
        </div>

        <div class="pref_list" data-list="3">
            <div data-id="新潟県">
                <label><input id="%E6%96%B0%E6%BD%9F%E7%9C%8C" type="checkbox" name="pref" value="新潟県">新潟県</label>
            </div>
            <div data-id="富山県">
                <label><input id="%E5%AF%8C%E5%B1%B1%E7%9C%8C" type="checkbox" name="pref" value="富山県">富山県</label>
            </div>
            <div data-id="石川県">
                <label><input id="%E7%9F%B3%E5%B7%9D%E7%9C%8C" type="checkbox" name="pref" value="石川県">石川県</label>
            </div>
            <div data-id="福井県">
                <label><input id="%E7%A6%8F%E4%BA%95%E7%9C%8C" type="checkbox" name="pref" value="福井県">福井県</label>
            </div>
            <div data-id="山梨県">
                <label><input id="%E5%B1%B1%E6%A2%A8%E7%9C%8C" type="checkbox" name="pref" value="山梨県">山梨県</label>
            </div>
            <div data-id="長野県">
                <label><input id="%E9%95%B7%E9%87%8E%E7%9C%8C" type="checkbox" name="pref" value="長野県">長野県</label>
            </div>
            <div data-id="岐阜県">
                <label><input id="%E5%B2%90%E9%98%9C%E7%9C%8C" type="checkbox" name="pref" value="岐阜県">岐阜県</label>
            </div>
            <div data-id="静岡県">
                <label><input id="%E9%9D%99%E5%B2%A1%E7%9C%8C" type="checkbox" name="pref" value="静岡県">静岡県</label>
            </div>
            <div data-id="愛知県">
                <label><input id="%E6%84%9B%E7%9F%A5%E7%9C%8C" type="checkbox" name="pref" value="愛知県">愛知県</label>
            </div>
            <div></div>
        </div>

        <div class="pref_list" data-list="4">
            <div data-id="三重県">
                <label><input id="%E4%B8%89%E9%87%8D%E7%9C%8C" type="checkbox" name="pref" value="三重県">三重県</label>
            </div>
            <div data-id="滋賀県">
                <label><input id="%E6%BB%8B%E8%B3%80%E7%9C%8C" type="checkbox" name="pref" value="滋賀県">滋賀県</label>
            </div>
            <div data-id="京都府">
                <label><input id="%E4%BA%AC%E9%83%BD%E5%BA%9C" type="checkbox" name="pref" value="京都府">京都府</label>
            </div>
            <div data-id="大阪府">
                <label><input id="%E5%A4%A7%E9%98%AA%E5%BA%9C" type="checkbox" name="pref" value="大阪府">大阪府</label>
            </div>
            <div data-id="兵庫県">
                <label><input id="%E5%85%B5%E5%BA%AB%E7%9C%8C" type="checkbox" name="pref" value="兵庫県">兵庫県</label>
            </div>
            <div data-id="奈良県">
                <label><input id="%E5%A5%88%E8%89%AF%E7%9C%8C" type="checkbox" name="pref" value="奈良県">奈良県</label>
            </div>
            <div data-id="和歌山県">
                <label><input id="%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C" type="checkbox" name="pref" value="和歌山県">和歌山県</label>
            </div>
            <div></div>
        </div>

        <div class="pref_list" data-list="5">
            <div data-id="鳥取県">
                <label><input id="%E9%B3%A5%E5%8F%96%E7%9C%8C" type="checkbox" name="pref" value="鳥取県">鳥取県</label>
            </div>
            <div data-id="島根県">
                <label><input id="%E5%B3%B6%E6%A0%B9%E7%9C%8C" type="checkbox" name="pref" value="島根県">島根県</label>
            </div>
            <div data-id="岡山県">
                <label><input id="%E5%B2%A1%E5%B1%B1%E7%9C%8C" type="checkbox" name="pref" value="岡山県">岡山県</label>
            </div>
            <div data-id="広島県">
                <label><input id="%E5%BA%83%E5%B3%B6%E7%9C%8C" type="checkbox" name="pref" value="広島県">広島県</label>
            </div>
            <div data-id="山口県">
                <label><input id="%E5%B1%B1%E5%8F%A3%E7%9C%8C" type="checkbox" name="pref" value="山口県">山口県</label>
            </div>
            <div data-id="徳島県">
                <label><input id="%E5%BE%B3%E5%B3%B6%E7%9C%8C" type="checkbox" name="pref" value="徳島県">徳島県</label>
            </div>
            <div data-id="香川県">
                <label><input id="%E9%A6%99%E5%B7%9D%E7%9C%8C" type="checkbox" name="pref" value="香川県">香川県</label>
            </div>
            <div data-id="愛媛県">
                <label><input id="%E6%84%9B%E5%AA%9B%E7%9C%8C" type="checkbox" name="pref" value="愛媛県">愛媛県</label>
            </div>
            <div data-id="高知県">
                <label><input id="%E9%AB%98%E7%9F%A5%E7%9C%8C" type="checkbox" name="pref" value="高知県">高知県</label>
            </div>
            <div></div>
        </div>

        <div class="pref_list" data-list="6">
            <div data-id="福岡県">
                <label><input id="%E7%A6%8F%E5%B2%A1%E7%9C%8C" type="checkbox" name="pref" value="福岡県">福岡県</label>
            </div>
            <div data-id="佐賀県">
                <label><input id="%E4%BD%90%E8%B3%80%E7%9C%8C" type="checkbox" name="pref" value="佐賀県">佐賀県</label>
            </div>
            <div data-id="長崎県">
                <label><input id="%E9%95%B7%E5%B4%8E%E7%9C%8C" type="checkbox" name="pref" value="長崎県">長崎県</label>
            </div>
            <div data-id="熊本県">
                <label><input id="%E7%86%8A%E6%9C%AC%E7%9C%8C" type="checkbox" name="pref" value="熊本県">熊本県</label>
            </div>
            <div data-id="大分県">
                <label><input id="%E5%A4%A7%E5%88%86%E7%9C%8C" type="checkbox" name="pref" value="大分県">大分県</label>
            </div>
            <div data-id="宮崎県">
                <label><input id="%E5%AE%AE%E5%B4%8E%E7%9C%8C" type="checkbox" name="pref" value="宮崎県">宮崎県</label>
            </div>
            <div data-id="鹿児島県">
                <label><input id="%E9%B9%BF%E5%85%90%E5%B3%B6%E7%9C%8C" type="checkbox" name="pref" value="鹿児島県">鹿児島県</label>
            </div>
            <div data-id="沖縄県">
                <label><input id="%E6%B2%96%E7%B8%84%E7%9C%8C" type="checkbox" name="pref" value="沖縄県">沖縄県</label>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                #layer {
    display: none;
    /* 初期表示は非表示 */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.20;
}

#popup {
    z-index: 1;
    display: none;
    /* 初期表示は非表示 */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: white;
    border-radius: 5px;
    text-align: center;
}

/* ↑↑↑ホップアップ↑↑↑ */

/* ↓↓↓日本地図↓↓↓ */

/* 日本地図DOM */
.japan_map {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    display: table;
    background-color: #adf6ff;
}

/* 日本地図画像(スマホ対応用) */
.japan_map img {
    max-width: 100%;
    height: auto;
    border: 0;
    -webkit-backface-visibility: hidden;
}

/* 日本地図ボタン */
.japan_map .area_btn {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    cursor: pointer;
    border: 3px solid #333333;
    border-radius: 5px;
    background-color: #FFF;
    padding: 0.2em auto;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

/* ボタン配置(使用する日本地図画像により微調整) */
.japan_map .area_btn.area1 {
    top: 30%;
    right: 0;
}

.japan_map .area_btn.area2 {
    top: 58%;
    right: 11%;
}

.japan_map .area_btn.area3 {
    top: 56%;
    right: 27.5%;
}

.japan_map .area_btn.area4 {
    top: 65%;
    right: 44%;
}

.japan_map .area_btn.area5 {
    top: 52%;
    left: 20%;
}

.japan_map .area_btn.area6 {
    top: 70%;
    left: 0;
}

/* オーバーレイ */
.japan_map .area_overlay {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-color: #111;
    opacity: 0.5;
    cursor: pointer;
}

/* 選択前は表示を隠す */
.japan_map .pref_area {
    display: none;
}

/* 地域毎の都道府県リスト */
.japan_map .pref_list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 3;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90%;
    background-color: #FFF;
}

.japan_map .pref_list>div {
    box-sizing: border-box;
    width: 50%;
    border: 1px solid #CCC;
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    cursor: pointer;
}
              
            
!

JS

              
                function get_combi(base, num, ary = [], idx = 0) {
    let result = [];
    for (let i = idx; i <= base.length - num; i++) {
        let newary = ary.concat(base[i]);
        if (num > 1) {
            let r = get_combi(base, num - 1, newary, i + 1);
            Array.prototype.push.apply(result, r);
        } else {
            result.push(newary.join('、'));
        }
    }
    return result;
}

$(window).on('load', function() {
    const arr = [];
    const pref = document.getElementsByName('pref');
    for (let i = 0; i < pref.length; i++) {
        if (document.URL.match(prefectures[i])) {
            let obj = document.getElementById(prefectures[i]);
            obj.checked = !obj.checked;

            if (pref[i].checked) {
                arr.push(pref[i].value);
            }
            $('#prefecture').text(arr);
        }
    }
});

$(function() {
    // show popupボタンクリック時の処理
    $('#show').click(function(e) {
        $('#popup, #layer').show();
    });

    // レイヤー/ポップアップのcloseボタンクリック時の処理
    $('#close, #layer').click(function(e) {
        $('#popup, #layer').hide();
    });

    function updateData() {
        const arr = [];
        const pref = document.getElementsByName('pref');
        for (let i = 0; i < pref.length; i++) {
            if (pref[i].checked) {
                arr.push(pref[i].value);
            }
        }
        $('#prefecture').text(arr);

        // 組み合わせ
        let join = [];
        for (i = 1; i < arr.length + 1; i++) {
            join += get_combi(arr, i) + ',';
            $("#arr").text(join);
        }
        if (arr.length == 0 ) {
          $("#arr").text(arr);
        }
    }

    $("input[type=checkbox]").click(function() {
        updateData();
    });

    //地域を選択
    $('.area_btn').click(function() {
        $('.area_overlay').show();
        $('.pref_area').show();
        let area = $(this).data('area');
        $('[data-list]').hide();
        $('[data-list="' + area + '"]').show();
    });

    //レイヤーをタップ
    $('.area_overlay').click(function() {
        prefReset();
    });

    //都道府県をクリック
    $('.pref_list [data-id]').click(function() {
        if ($(this).data('id')) {
            let id = $(this).data('id');
            //このidを使用して行いたい操作をしてください
            //都道府県IDに応じて別ページに飛ばしたい場合はこんな風に書く↓
            //window.location.href = 'https://himakoma.net/index.php?page=search&sRegion=' + id;
        }
    });

    //表示リセット
    function prefReset() {
        $('[data-list]').hide();
        $('.pref_area').hide();
        $('.area_overlay').hide();
    }

    //全ての都道府県を選択
    $('#all').click(function() {
        $('input[name="pref"]').prop('checked', true);
        const arr = [];
        const pref = document.getElementsByName('pref');

        for (let i = 0; i < pref.length; i++) {
            if (pref[i].checked) {
                arr.push(pref[i].value);
            }
        }
        $('#prefecture').text(arr);
    });

    //リセットボタン
    $('#reset').click(function() {
        $('input[name="pref"]').prop('checked', false);
        const arr = [];
        const pref = document.getElementsByName('pref');
        for (let i = 0; i < pref.length; i++) {
            if (pref[i].checked) {
                arr.push(pref[i].value);
            }
        }
        $('#prefecture').text(arr);
    });

    //閉じるボタン
    $('#onoff').click(function() {
        prefReset();
    });
});
              
            
!
999px

Console