Javascript 图像作为单选按钮

我试图做到这一点，但没有成功

这是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>

当我将所选类指定给图像时，它是ok的，我看到它带有黑色边框。但是分配类的javascript部分似乎不起作用。 有没有其他方法可以为图像指定正确的类？

---

感谢您的支持。

为了简单起见，您可以使用

toggleClass

函数：）

由于人们都很挑剔，先生，这里有一把小提琴给你

---

您确定要使用jQuery吗

使用sane浏览器，您可以使用纯css解决此问题：

HTML:

当然，IE8和更老版本需要一些javascript回退

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

---

@Joseph82 carte是一个ID:

我想你看到的是

大纲。请尝试为您的
:active
图像设置
outline:none
。如果你能为同样的问题创建一个提琴，这将有助于在这里很好地工作：-你能在提琴上重现这个问题吗？@user2786594，为什么你认为这个类没有分配？正如RGrahm所说，所有代码都很好。@Joseph82在我的在线测试页面中它对我不起作用。。。这就是为什么我把我的问题贴在这里。最后，biziclop的答案对我来说是完美的。感谢大家。这不是一个答案，这是一个评论，绝对不是一个回答，因为他说javascript不起作用，我建议我使用一些东西，可以很好地实现他的目标。biziclop-biziclop:）
<div id="carte">

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

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

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

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

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