无线电选择Jquery图像边框

Question

我正在尝试绑定边框图像，以便在选择单选框时显示。这是代码：

<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"); 
    }  
});

现在看来，当选择1个框时，两个图像都会出现边框。我无法找到将图像绑定到无线电选择框的方法。

谢谢，

Answer 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中的一个，而不是几个。

Answer 2

我会在您的样式表中添加一个类，如.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

Answer 3

最好的逻辑是使用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;
}

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