COLUM
コラム
画像を使ってcheckboxを選択!ついでに選択数にJSPで制限をつける
2021/11/11
チェックボックスの四角を消して画像で選択する方法です。2件選択したら選択済の画像を未選択にしないと別の画像が選択できません。
サンプル
お好みの家を2件まで選択してください!
※画像はマキハウス様よりお借りしました。
MODXのメールフォーム「cfFormMailer」を使う場合、ちょくちょく使うので備忘録代わりに記載しています。
HTML
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;}
MEETING
福岡市近郊は
無料でお伺いします