html - 我如何设置带有图像的单选按钮样式 - 笑脸表示好，悲伤笑脸表示坏？

Question

我想为用户反馈创建一个 HTML 表单。如果总体反馈好，用户应该点击一个笑脸，如果总体反馈不好，用户应该选择一个悲伤的笑脸。

我认为这应该使用单选按钮来完成，使用笑脸而不是单选按钮。也许我错了......

你知道我怎样才能做到这一点吗？

谢谢!

Answer 1

让我们保持简单，好吗？首先，使用纯 HTML + CSS:

<div id="emotion">
    <input type="radio" name="emotion" id="sad" />
        <label for="sad"><img src="sad_image.png" alt="I'm sad" /></label>

    <input type="radio" name="emotion" id="happy" />
        <label for="happy"><img src="happy_image.png" alt="I'm happy" /></label>
</div>

如果没有 JavaScript，这会很好地降级。使用id 和for 属性将label 和radiobutton 联系起来，这样当图片被选中时，对应的radiobutton 就会被填充。这很重要，因为我们需要使用 JavaScript 隐藏实际的单选按钮。现在来了解一些 jQuery 优点。首先，创建我们需要的 CSS:

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

.selected {
    background-color: #ccc;
}

#emotion label {
    display: inline-block;
    cursor: pointer;
}

#emotion label img {
    padding: 3px;
}

现在是 JavaScript:

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

我们在这里不使用 display: none 的原因是出于可访问性的原因。请参阅:http://www.jsfiddle.net/yijiang/Zgh24/1现场演示，更花哨的东西。