Question

是否有一种简单而简单的方法来设置仅使用CSS的单选按钮，所以我单击图像而不是子弹？比如竖起大拇指/竖起大拇指。

我有两个单选按钮，我需要注册单击哪一个。当您按下按钮时，单选按钮会变得可见，当您单击单选按钮时，文本将替换单选按钮。

按钮＆gt; RADIO BUTTONS＆gt; TEXT

这是我走了多远：

HTML

<div id="txtradiocall_lille" style="display:none;">
              <input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
              Yes
              <input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
              No
            </div>

CSS

.txtradiocall_lille input[type='radio']
{
    display:inline;
}

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

.selected {
    background-color: #ccc;
}

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

#txtradiocall_lille label:hover {
    background-color: #efefef;
}

#txtradiocall_lille label img {
    padding: 3px;

}

广播点击处理程序

 $("input[type='radio']").change(function () {
 var selection = $(this).val();
  getcallaskok(selection, talok);
 });

目前，我正在获取图像而不是无线电项目符号，但似乎点击没有注册，因为我没有得到点击后我需要的文字。

有人可以帮助我吗？

Answer 1

最佳做法是简单地使用标签元素：

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

然后使用css为标签设置样式。在您的情况下，可能会将您的图像添加为背景。

然后，您只需使用绝对定位将其移出屏幕，即可隐藏实际的单选按钮。注：不要使用display：none或visibility：hidden来隐藏单选按钮，因为这对可访问性不利。

因此，用户将单击标签，将选择现在不在屏幕上的单选按钮。

Answer 2

我认为隐藏单选按钮并使用像你正在做的标签就足够了。但可能需要一些修正。标签中的“for”属性指向id，而不是您现在正在执行的值。并将单选按钮的使用名称分组，而不是像现在这样的ID。

样式单选按钮与CSS和使用图像

2 个答案: