【问题标题】：Jquery Image Border on Radio SelectRadio Select上的Jquery图像边框
【发布时间】：2013-04-16 03:46:33
【问题描述】：

我正在尝试绑定边框图像以在您选择单选框时显示。代码如下：

<table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                    </tr></table>

这里是javascript：

$(".optionVent").click(function(){
    if($(this).is(':checked')){
        $("#option_img").css('border', "solid 1px orange"); 
    }  
});

As it stands now, when 1 box is selected, both images get borders.我想不出一种将图像绑定到单选框的方法。

谢谢，

【问题讨论】：

标签： jquery image input border radio

【解决方案1】：

$(".optionVent").on('change', function(){
    $('img').css('border', 'none'); //add a class to be more specific
    $(this).closest('td').find('img').css('border', 'solid 1px orange'); 
});

另外，ID 是唯一的，每个 ID 只能有一个，而不是多个。

【讨论】：

效果很好！！！但是如果选中另一个单选框，如果边框消失，我该如何添加？我试过这个：$(this).closest('td').find('img').css('border', "none"); 但它不起作用
只需添加移除边框等
改了一点，试试看！

【解决方案2】：

最好的逻辑是使用 CSS 来实现边框，并简单地使用 jQuery 将类添加/删除到所选元素。这使 CSS 样式与 HTML 内容分开，这是它应该的样子。

$(".optionVent").click (function {
  // First, go up two levels and back down one to remove the classes
  $(this).parent().parent().children().removeclass("selected");

  // Secondly, add the class to the parent element
  $(this).parent().addclass("selected");
});

您的 CSS 将是：

.selected {
  border: solid 1px orange;
}

您可以根据需要对其进行修改以获得所需的效果。

【讨论】：

【解决方案3】：

我会在您的样式表中添加一个类，例如 .selected_img { border: solid 1px orange; }，然后编辑您的代码和标记，如下所示：

HTML

<table width="100%">
  <tr>
    <td>
        <div class="img_box">
            <label for="vent1">
                <img src="img/option/collar.png" width="100px" id="option_img1" /><br>
                <input class="optionVent radio_img1" type="radio" name="vent" id="vent1" value="1" />
                vent one
            </label>
        </div>
    </td>
    <td></td>
    <td>
        <div class="img_box">
            <label for="vent2">
                <img src="img/option/collar.png" width="100px" id="option_img2" /><br>
                <input class="optionVent radio_img2" type="radio" name="vent" id="vent2" value="1" />
                vent two
            </label>
        </div>
    </td>
  </tr>
</table>

JS

$(".optionVent").change(function() {
    $('.img_box').removeClass('selected_img');
    $(this).closest('.img_box').addClass('selected_img');
});

CSS

.img_box {
    display: inline-block;
    padding: 20px;
}
.selected_img {
    border: 1px solid orange;
}

我喜欢在 javascript 中添加类而不是包含样式，以便您可以在 CSS 中编辑所有样式。

演示

点击JSFiddle Demo

【讨论】：