图像作为单选按钮

Images as radio button

本文关键字：单选按钮 图像      更新时间：2023-09-26

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

这是 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 部分不起作用。我还有其他方法可以为图像分配正确的类吗？感谢您的支持。

你确定要使用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);
}
您可以使用

toggleClass函数进行一些简单:)

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

既然人们很挑剔，这里有一个小提琴

给你，先生

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

$('#carte label').click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected');;
});
相关文章：