样式化复选框脚本

Question

我正在寻找一个允许我拥有多个图像的脚本（也可以是图标）。 一旦有人点击图像/图标，它就会变成不同的颜色。只能同时突出显示一个图像/图标。

为什么我需要这个？ 我需要一个包含多个类别的表单。每个图像/图标代表一个类别。提交表单时，我需要具有突出显示的图像/图标的值。

我想表单需要复选框，某种css隐藏复选框本身并显示图像/图标？ 有人可以帮我解决这个问题吗？不知道如何开始...

Answer 1

您可以将图像包装并输入如下标签：

小例子

label img { cursor: pointer; }

<label>
  <input type="radio" name="img" value="image_id_or_path" />
  <img src="http://placehold.it/200x200" />
</label>

<label>
  <input type="radio" name="img" value="image_id_or_path" />
  <img src="http://placehold.it/200x200" />
</label>

如果我们使用一些jQuery来显示所选图像，你可以使用类似的东西：

工作示例

$( function() { 
	$( 'label input' ).on( 'change', function() {
		$( 'img.active' ).removeClass( 'active' );
		$( this ).parent().find( 'img' ).addClass( 'active' );
	} )
} );

label img { cursor: pointer; border: 1px solid transparent; }
label input[type="radio"] { display: none; }
img.active { border: 1px solid blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" name="img" value="image_id_or_path" />
  <img src="http://placehold.it/200x200" />
</label>

<label>
  <input type="radio" name="img" value="image_id_or_path" />
  <img src="http://placehold.it/200x200" />
</label>