Javascript 创建一个类似于 html 复选框的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5523213/
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
Create a div that acts like an html checkbox
提问by Php Beginner
I want to turn on/off the div on click (it should act like an html checkbox) and make visible changes using css. Is this possible without Javascript, or would I have to use Javascript?
我想在点击时打开/关闭 div（它应该像一个 html 复选框）并使用 css 进行可见的更改。如果没有 Javascript，这是否可能，或者我必须使用 Javascript？
If you have created such a script please share it.
如果您创建了这样的脚本，请分享它。
Thank you for your help in advance.
提前谢谢你的帮助。
回答by nicosemp
You could do this very easily with only CSS code by hiding the checkboxes and styling their labels like so:
HTML
您可以通过隐藏复选框并像这样设置标签样式，仅使用 CSS 代码轻松完成此操作：
HTML
<div id="checkboxes">
<input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
<label class="whatever" for="r1"></label>
<input type="checkbox" name="rGroup" value="2" id="r2" />
<label class="whatever" for="r2"></label>
<input type="checkbox" name="rGroup" value="3" id="r3" />
<label class="whatever" for="r3"></label>
</div>
CSS
CSS
.whatever{
background-color: red;
display: inline-block;
width: 100px;
height: 100px;
}
#checkboxes input[type=checkbox]{
display: none;
}
#checkboxes input[type=checkbox]:checked + .whatever{
background-color: green;
}
You can take a look at this simple code in action here:
JSFiddle
Hope this helps! :)
回答by David
You could implement this without javascript by using the label element to wrap the div you want clickable:
您可以通过使用 label 元素包装您想要可点击的 div 来实现这一点，而无需 javascript：
<input name="checkbox1" id="checkbox1" type="checkbox">
<label for="checkbox1">
Click me
</label>
and css:
和CSS：
input {
display:none;
}
:checked + label {
border: 1px solid rgba(81, 203, 238, 1);
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
see here for an example with css styling http://jsfiddle.net/vyP7c/761/
有关 css 样式的示例，请参见此处http://jsfiddle.net/vyP7c/761/
回答by Hyman Billy
I have been trying to answer your question and I have created a little jQuery(1.5.2) code.
Hope this would help just have a look and tell me is this what you are looking for?, or if you want something else I can made it too. In this script on clicking a divelement with id on_off(You can select it too by using var!) and class for on (on_off_on) and off (on_off_off) and by the way you can select them too, just get to this jsFiddle link for
live demoor you can see the script below --
我一直在尝试回答您的问题，并且创建了一些 jQuery(1.5.2) 代码。希望这会有所帮助，看看并告诉我这是您要找的东西吗？或者如果您想要其他东西，我也可以做到。在此脚本中单击div带有 id的元素on_off（您也可以使用 var 选择它！）和类 on ( on_off_on) 和 off ( on_off_off) 顺便说一下，您也可以选择它们，只需访问此 jsFiddle 链接即可进行
实时演示或你可以看到下面的脚本——
HTML --
HTML --
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
<div id="on_off" class="on_off_on" >ON</div>
</body>
</html>
CSS --
css --
div.on_off_off
{
background: rgb(150,110,120);
font-family: segoe ui;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
border: 3px solid rgb(180, 140, 150);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
color: #fff;
display: inline;
}
div.on_off_on
{
background: rgb(110,150,120);
font-family: segoe ui;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
border: 3px solid rgb(140, 180, 150);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
color: #fff;
display: inline;
}
jQuery Code --
jQuery 代码——
$(document.body).ready(function () {
$(function () {
var main_obj_id = 'on_off';
var on_class = 'on_off_on';
var off_class = 'on_off_off';
$('#' + main_obj_id).click(function () {
if ($(this).is('.' + on_class)) {
$(this).removeClass(on_class);
$(this).addClass(off_class);
$(this).html('OFF');
} else {
$(this).removeClass(off_class);
$(this).addClass(on_class);
$(this).html('ON');
}
});
});
});
Hope this would help!
希望这会有所帮助！
回答by heroix
Well you have to use javascript and it is prety simple. You just need to change css style of div on action.
那么你必须使用javascript，它非常简单。您只需要更改 div 的 css 样式即可。
<a href='javascript: toggle()'>toggle</a>
<div id='div1' style='display:none'>
Don't display me
</div>
<script>
function toggle(){
var div1 = document.getElementById('div1')
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}
</script>
