在表单中突出显示选定的图像 - 使用 Jquery？

Question

我在谷歌上搜索了答案，但发现什么也没有，所以即使是一个显示如何执行以下操作的页面的链接也将不胜感激。

基本上我有一个只有图像的表单，

<form>
<input type="image" src="image.jpg" value="image_value">
<input type="image" src="image2.jpg" value="image_value2">
</form>

我希望能够以某种方式突出显示用户选择的图像。当用户单击图像 1 时，即使只是图像 1 周围的轮廓也是完美的。

我已经在这个项目中使用了 Jquery，所以如果有一个 jquery 解决方案，那将是最方便的。

Answer 1

一种可访问的方法是将单选按钮标签的样式设置为像图像选择一样：

<form action="#" method="post">
    <input type="radio" class="radio" name="example" id="ex1" value="ex1" checked />
    <label for="ex1" class="label">Example 1</label>
    <input type="radio" class="radio" name="example" id="ex2" value="ex2" />
    <label for="ex2" class="label">Example 2</label>
</form>

然后是CSS 。正如您所看到的，无线电本身被隐藏，不透明度为 0：

.radio {
    opacity: 0;
    position: absolute;
}
.label {
    background: url(http://i.imgur.com/mW6xr2I.png);
    text-indent: -999em;
    border: 10px solid white;
    width: 126px;
    height: 126px;
    display: block;
    float: left;
    margin: 10px;
}
input[type="radio"]:checked + label {
    border: 10px solid orange;
}

这是一个实际示例：http://jsfiddle。 net/RH98R/

这还有一个额外的好处，就是不依赖 jQuery（甚至是 javascript）！

Answer 2

更新：请参阅bryanbraun 的回答。他的要好得多。

---

在 HTML 中， 只是一个以图像为表面的提交按钮。我不认为这就是你想要的。您可能需要一个实际图像的列表，单击该列表时，会根据“数据值”属性设置隐藏的表单值。所以你的 HTML 应该看起来像这样：

<form id="select-form">
    <img src="image.jpg" data-value="image_value">
    <img src="image2.jpg" data-value="image_value2">
    <input type="hidden" id="image-value" name="selected_image" value="">
</form>

然后在你的 javascript 中，你想要突出显示图像并设置隐藏值，如下所示：

$('#select-form img').click(function() {
    // Set the form value
    $('#image-value').val($(this).attr('data-value'));

    // Unhighlight all the images
    $('#select-form img').removeClass('highlighted');

    // Highlight the newly selected image
    $(this).addClass('highlighted');
});

最后，在 CSS 文件中为突出显示类设置一些样式：

img.highlighted {
    border: 2px solid blue;
}

Answer 3

像下面这样的东西应该可以工作，你可以创建样式 CSS 类并更容易地更改样式。

$("input[type='image']")
    .focus(function() { $(this).css("border","solid 1px #f00"); })
    .blur(function() { $(this).css("border","0"); });

Answer 4

类似于

CSS:

.selected { border: 1px solid black; }

javascript:

$(function() {
     $("input[type=image]").click(function(){ $(this).addClass('selected'); });
});

Answer 5

以下内容将为每个图像输入提供 1 像素边框和 10 像素点击时的填充，但理想情况下，您应该为它们提供一个类来定位它们，例如： $(".imgs2higlight").bind()

  $(document).ready(function() {
            $("input[type='image']").bind('click',function(e) {
e.preventDefault();
            $(this).css({padding : '10px', border: "1px solid blue"});
            })
            })