用图像替换复选框？

Question

我正在尝试用三个不同的图像替换 html 表单中的三个复选框。这个想法是用户可以通过单击而不是单击复选框来 select 图片。我一直在整理一些代码，但无法弄清楚如何使所有复选框 select 可用。目前只有第一张图片在点击时有效。谁能帮我？恐怕我是javascript的真正新手。参见 fiddle here

形式

<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic1" value=9></div><div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic2" value=12></div><div class="col-md-3">
          <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic3" value=7></div>
   <input type="submit" name="submit" value="Add" />
</div>
</form>

javascript

$('#blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('#imgCheck').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('#imgCheck').prop('checked', false);
        }
    })

Answer 1

发生这种情况是因为您多次使用同一个 ID。 ID 应该是唯一的。不要使用 id="blr"，而是尝试使用 class="blr"。我更新了 fiddle:

http://jsfiddle.net/0rznu4ks/1/

Answer 2

首先，正如 Amar 所说，id 应该是唯一的。对多个元素使用类。还要注意分号和结束 html 标签。

针对您的问题：使用函数 .siblings() 获取相关的复选框元素。

$('.blr').on('click', function () {
    var $$ = $(this);
    if (!$$.is('.checked')) {
        $$.addClass('checked');
        $$.siblings('input.imgCheck').prop('checked', true);
    } else {
        $$.removeClass('checked');
        $$.siblings('input.imgCheck').prop('checked', false);
    }
});

在此处查看演示： http://jsfiddle.net/yd5oq032/1/

祝你好运！

Answer 3

为什么要使用 JavaScript？您可以使用 CSS、:checked 属性和 label 元素来做到这一点。

input[type=checkbox] {
  display: none;
}

:checked+img {
  border: 2px solid red;
}

<label>
  <input type="checkbox" name="checkbox" value="value">
  <img src="http://lorempixel.com/50/50/" alt="Check me">
</label>

用图像替换复选框？

Replacing checkboxes with images?

html

javascript

checkbox