Question

我正在努力实现这一目标，但它不起作用。

这是CSS表格：

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #000000;
}

#carte label {
    border: inline-block;
    cursor: pointer;
}

#carte label img {
    padding: 3px;
}

HTML部分：

<div id="carte">
    Select a card:<BR>
    <input type=radio name="carte" id="cart1" class='input_hidden' />
    <label for="cart1">
       <img src="cart1.jpg" alt="carte1" />
    </label>
    <input type=radio name="carte" id="cart2" class='input_hidden' />
    <label for="cart2">
       <img src="cart1.jpg" alt="carte2" />
    </label>
    <input type=radio name="carte" id="cart3" class='input_hidden' />
    <label for="cart3">
       <img src="cart3.jpg" alt="carte3" />
    </label>
</div>

和javascript：

$('#carte label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

当我将选定的类分配给图像时，没关系，我看到它带有黑色边框。但似乎分配类的javascript部分不起作用。我还有其他方法可以为图像分配正确的类吗？感谢您的支持。

Answer 1

您确定要使用jQuery吗？

使用理智的浏览器，您可以使用纯css解决它：http://jsfiddle.net/VSR86/4/

HTML：

<div id="carte">

    <label>
        <input type="radio" name="carte" value="cart1" >
        <img src="http://placekitten.com/100/100">
    </label>
    ...

CSS：

label input + img {
  border: 10px solid transparent;
}

label input:checked + img {
  border: 10px solid blue;
}

当然，IE8及更早版本需要一些javascript后备。

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

IE8修复

更新了CSS：

label input.checked + img,
label input:checked + img {
  border: 10px solid blue;
}

JS后备：

if(/* this browser is IE8 or worse */){

  $(document).on('click','label:has(input[type="radio"])',function(){
      var $r = $(this).find('input');
      adjustRadio( $r.attr('name'), $r.val(), 'checked');
  });

}


function adjustRadio( name, value, className ){
  // wait for other event handlers to run
  setTimeout( function(){
    $('input[type="radio"][name="'+name+'"]').each( function(){
      var $r = $(this);
      $r.toggleClass( className, $r.val() === value );
    });
  },1);
}

Answer 2

您可以使用toggleClass函数来简化：）

http://api.jquery.com/toggleClass/

由于人们挑剔，先生，这是你的小提琴

http://jsfiddle.net/8B3SW/1/

$('#carte label').click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected');;
});

图像作为单选按钮

2 个答案:

IE8修复