javascript 使复选框看起来像一个按钮 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19927813/
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
Make a checkbox look like a button CSS
提问by JeremyA1
I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I'm utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.
我认为我想要实现的目标可以以更简单的方式完成。但是我几乎没有 JS 经验，也没有 CSS 方面的经验。所以我正在使用预构建的 CSS 和 JS 代码并对其进行微妙的修改。所以我会解释我的最终目标，看看我目前的目标是否可以接受。
- A top menu on the webpage that has push buttons and checkboxes that all visually look the same
- I would like checkboxes to look like buttons, e.g. no checkbox only the label.
- I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
- Is the way I'm calling the JS code through the button and checkbox correct or too complicated?
- 网页上的顶部菜单，具有视觉上看起来相同的按钮和复选框
- 我希望复选框看起来像按钮，例如没有复选框只有标签。
- 鉴于它正在调用的 JS 代码，我希望复选框仍然保留其作为复选框的功能
- 我通过按钮和复选框调用 JS 代码的方式是正确还是过于复杂？
<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
回答by Loupax
It is not possible to change the appearence of a checkbox so radically using CSS.
不可能使用 CSS 从根本上改变复选框的外观。
What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.
但是，您可以做的是将标签元素设置为足以使其看起来像按钮的样式。由于标签元素的性质，单击它会切换复选框的状态，保持您的功能不变。
Here is how to do it
这是如何做到的
Markup
标记
<li>
<label for="kml-red-check">I am a button!</label>
<input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>
Note that I've changed the onclickhandler to onchangesince now it is impossible to click the checkbox itself. Its value changes though when you click on the label
请注意，我已将onclick处理程序更改为，onchange因为现在无法单击复选框本身。当您单击标签时，它的值会发生变化
Styling
造型
label[for="kml-red-check"]{
//Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
display:none;
}
回答by ravb79
html:
html：
<input type="checkbox" class="hidden" name="cb" id="cb"><label for="cb">text</label>
css:
css：
.hidden {position:absolute;visibility:hidden;opacity:0;}
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
http://css-tricks.com/almanac/selectors/c/checked/
http://css-tricks.com/almanac/selectors/c/checked/
Won't work on lt IE9 though.
不会在 lt IE9 上工作。
edit: Following your markup it should be something like this:
编辑：按照您的标记，它应该是这样的：
<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>
And then check if the checkbox is checked or not in your function. onchange / onclick in a checkbox doesn't work in IE
然后检查您的函数中是否选中了复选框。 复选框中的 onchange / onclick 在 IE 中不起作用
edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.
再次编辑：更改了 NAME 属性，因此您最终不会再遇到问题。并为 IE8 中无响应但最终需要的 onchange 功能添加了一些解决方法。最终你应该为你的函数添加一个计时器，而不是内联。
function checkIt(e){
if(document.getElementById(e).checked){
alert('checked');
} else {
alert('unchecked');
}
}
回答by shubham kucheria
<label>
<input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
<span>this is button add some css to lokking like a button</span>
</label>
this will work like button , if you don't want to show checkbox use this
这将像按钮一样工作，如果您不想显示复选框，请使用它
<label>
<input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
<span>this is button add some css to lokking like a button</span>
</label>
check it out here https://jsfiddle.net/h0ntpwqk/2/
