チェックボックスの四角を消して画像で選択する方法です。2件選択したら選択済の画像を未選択にしないと別の画像が選択できません。

サンプル

お好みの家を2件まで選択してください！

※画像はマキハウス様よりお借りしました。

MODXのメールフォーム「cfFormMailer」を使う場合、ちょくちょく使うので備忘録代わりに記載しています。

HTML

Aの家



Bの家



Cの家



Dの家



Eの家



Fの家

　

SCRIPT

　

CSS

.sample_checkbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
}
.sample_checkbox div{width:33.33%;}
.sample_checkbox label:hover {cursor: pointer;}
.sample_checkbox>div p{padding-top: 5px;font-size:13px !important;}
.sample_checkbox>div input[type="checkbox"] {display: none;}
.sample_checkbox>div input[type="checkbox"] + label img {
    opacity: .55;
    filter: alpha(opacity=55);
    -ms-filter: "alpha(opacity=55)";
    -khtml-opacity: .55;
    -moz-opacity: .55;
}
.sample_checkbox>div input[type="checkbox"]:checked + label img {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1;
    -moz-opacity: 1;
    border: #000 solid 3px;
    box-sizing: border-box;
}
.sample_checkbox>div input[type="checkbox"]:checked + label p{font-weight:800;}