jQuery 使单选按钮看起来像按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16242980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making radio buttons look like buttons instead
提问by Richard
I would like to have a set of radio buttons for a donation form, however I want them to look like buttons instead of the circle dials.
我想要一组用于捐赠表格的单选按钮，但是我希望它们看起来像按钮而不是圆形表盘。
What is the best approach to making something like that? Also, keep in mind, it has to work with IE8.
制作这样的东西的最佳方法是什么？另外，请记住，它必须与 IE8 一起使用。
Here's what I have so far, http://jsfiddle.net/YB8UW/
这是我到目前为止所拥有的，http://jsfiddle.net/YB8UW/
.donate-now {
list-style-type:none;
margin:25px 0 0 0;
padding:0;
}
.donate-now li {
float:left;
margin:0 5px 0 0;
}
.donate-now label {
padding:5px;
border:1px solid #CCC;
cursor:pointer;
}
.donate-now label:hover {
background:#DDD;
}
Thank you
谢谢
回答by PlantTheIdea
It can be done with CSS and without the need of a large framework. I have done this with checkboxes and radio buttons.
它可以使用 CSS 完成，无需大型框架。我已经用复选框和单选按钮完成了这项工作。
This works without adding new HTML, or bringing in any JS libraries.=> jsFiddle
这无需添加新的 HTML 或引入任何 JS 库即可工作。=> jsFiddle
THE NEW ORDER OF THE HTML
HTML 的新秩序
This is the ten minute hacky version, you can clean it up even further, but it shows a good example of how simple it is.
这是 10 分钟的 hacky 版本，你可以进一步清理它，但它展示了它是多么简单的一个很好的例子。
.donate-now {
list-style-type: none;
margin: 25px 0 0 0;
padding: 0;
}
.donate-now li {
float: left;
margin: 0 5px 0 0;
width: 100px;
height: 40px;
position: relative;
}
.donate-now label,
.donate-now input {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.donate-now input[type="radio"] {
opacity: 0.01;
z-index: 100;
}
.donate-now input[type="radio"]:checked+label,
.Checked+label {
background: yellow;
}
.donate-now label {
padding: 5px;
border: 1px solid #CCC;
cursor: pointer;
z-index: 90;
}
.donate-now label:hover {
background: #DDD;
}<ul class="donate-now">
<li>
<input type="radio" id="a25" name="amount" />
<label for="a25"></label>
</li>
<li>
<input type="radio" id="a50" name="amount" />
<label for="a50"></label>
</li>
<li>
<input type="radio" id="a75" name="amount" checked="checked" />
<label for="a75"></label>
</li>
<li>
<input type="radio" id="a100" name="amount" />
<label for="a100">0</label>
</li>
<li>
<input type="radio" id="other" name="amount" />
<label for="other">other:</label>
</li>
<li>
<input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>回答by A. Wolff
EDIT:this isn't a solution if you need to support IE browsers.
编辑：如果您需要支持 IE 浏览器，这不是解决方案。
You could use CSS appearance property:
您可以使用 CSS 外观属性：
-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */
回答by VoidKing
OR IF YOU WANT TO DO THIS YOURSELF...
或者如果你想自己做...
What I would do would be to create the buttons with the <button>element and a hidden form field element to remember which one is "pressed" like so:
我要做的是创建带有<button>元素和隐藏表单字段元素的按钮，以记住哪个被“按下”，如下所示：
<button type="button" id="btn1">Choice 1</button>
<button type="button" id="btn2">Choice 2</button>
<button type="button" id="btn3">Choice 3</button>
<input type="hidden" id="btnValue" value="" />
You will CSS to show that the button is "pressed down" or not "pressed down" so you would need them by default to be something like this:
您将使用 CSS 来显示按钮是“按下”还是“未按下”，因此默认情况下您需要它们是这样的：
button
{
border-width: 2px;
border-style: outset;
border-color: /*Insert a darker version of your button color here*/
}
Then in jQuery (if you can do it in jQuery, you can do it in straight JavaScript, so keep that in mind if you don't want to use jQuery):
然后在 jQuery 中（如果你可以在 jQuery 中完成，你可以直接在 JavaScript 中完成，所以如果你不想使用 jQuery，请记住这一点）：
$("#btn1").click(function () {
$(this).css("border-style", "inset")
$("#btn2").css("border-style", "outset;");
$("#btn3").css("border-style", "outset;");
$("btnValue").val("btn1IsPressed");
});
$("#btn2").click(function () {
$(this).css("border-style", "inset")
$("#btn1").css("border-style", "outset;");
$("#btn3").css("border-style", "outset;");
$("btnValue").val("btn2IsPressed");
});
$("#btn3").click(function () {
$(this).css("border-style", "inset")
$("#btn1").css("border-style", "outset;");
$("#btn2").css("border-style", "outset;");
$("btnValue").val("btn3IsPressed");
});
Now all you need to do is request the value from #btnValueafter POST (or GET or whatever), just like you normally would to tell which "button" they had pressed.
现在您需要做的就是从#btnValuePOST（或 GET 或其他）之后请求值，就像您通常会告诉他们按下了哪个“按钮”一样。
Be advised you will need to add a little more functionality to "unpress" the buttons, but I think you get the point. All you would need to do is read the value of #btnValueon click and, along with your other statements,use an if branch to handle whether it is already pressed or not and switch the borders accordingly (don't forget to clear ("") the value of #btnValueon the "unpressing" of a button so you can tell whether they left them all unpressed or not).
请注意，您需要添加更多功能来“取消按下”按钮，但我认为您明白这一点。您需要做的就是读取#btnValueon click的值，并与其他语句一起使用 if 分支来处理它是否已被按下并相应地切换边框（不要忘记清除 ( "") 值的#btnValue上一个按钮，“unpressing”这样你就可以告诉他们是否离开了他们所有未按与否）。
回答by nullability
Unfortunately you can't style radio buttons directly in any browser. The way to do it is to use <label>elements with properly set forattributes, then hide the radio button itself using visibility: hiddenrather than display: none. You can then position the labels wherever you want and they will act as radio buttons. You will need a bit of javascript to control the styling of the labels based on the state of the <input>element because IE8 won't support advanced CSS pseudoclasses like :checked.
不幸的是，您无法直接在任何浏览器中设置单选按钮的样式。这样做的方法是使用<label>具有正确设置for属性的元素，然后使用visibility: hidden而不是隐藏单选按钮本身display: none。然后您可以将标签放置在您想要的任何位置，它们将充当单选按钮。您将需要一些 javascript 来根据<input>元素的状态控制标签的样式，因为 IE8 不支持 .css 等高级 CSS 伪类:checked。
It's a bit of a hack but it is the only way to use native radio buttons with custom graphics and still preserve accessibility.
这有点像黑客，但它是使用带有自定义图形的本机单选按钮并仍然保持可访问性的唯一方法。
回答by Serenkiy
Try this simple logic with jQuery.
用 jQuery 试试这个简单的逻辑。
Html:
网址：
<div class="radio-btn-row">
<div class="radio-btn-wrapper">
<button id="bt1" class="radio-btn" type="button">Button 1</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn2" class="radio-btn" type="button">Button 2</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn3" class="radio-btn" type="button">Button 3</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn4" class="radio-btn" type="button">Button 4</button>
</div>
<!--No matter how many buttons do you want -->
</div>
js:
js：
$.each($('.radio-btn'), function (key, value) {
$(this).click(function (e) {
$('.radio-btn-selected')
.removeClass('radio-btn-selected')
.addClass('radio-btn');
$(this)
.removeClass('radio-btn')
.addClass('radio-btn-selected');
//do whatever you want on click
});
});
css:
css：
.radio-btn-row{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
}
.radio-btn-wrapper{
margin: 0px 4px;
}
.radio-btn{
background-color: #FFFFFF;
border: 1px solid #4A4A4A;
color: #4A5362;
font-size: 14px;
line-height: 26px;
outline: none;
}
.radio-btn-selected{
background-color: #FFFFFF;
border: 1px solid #55BC7E;
color: #55BC7E;
font-size: 14px;
line-height: 26px;
outline: none;
}
