読者です 読者をやめる 読者になる 読者になる

チェックボックスと、画像を連動

http://q.hatena.ne.jp/1413428819
こんな感じ






ソースは、こんなん。

<style>
.check_image {
    width: 100%;
    height: 100px;
}
.with_image + .check_image {
    background: URL(http://f.st-hatena.com/images/fotolife/a/a-kuma3/20141016/20141016144816.png) no-repeat;
}
.with_image:checked + .check_image {
    background: URL(http://f.st-hatena.com/images/fotolife/a/a-kuma3/20141016/20141016144817.png) no-repeat;
}
</style>

<div style="width: 150px; float: left;">
    <input type="checkbox" name="ck1" class="with_image" checked>
    <div class="check_image"></div>
</div>
<div style="width: 150px; float: left;">
    <input type="checkbox" name="ck2" class="with_image">
    <div class="check_image"></div>
</div>
<br clear="both">