创建一个像html复选框一样的div

我想打开/关闭点击div（它应该像html复选框一样）并使用css进行可见的更改。这可能没有Javascript，或者我必须使用Javascript？创建一个像html复选框一样的div

如果您已经创建了这样的脚本，请分享它。

非常感谢您的帮助。

2011-04-02 Php Beginner

这是不可能没有JavaScript（除非你发送每一个点击作为链接到服务器，并使用PHP来修改div - 我希望你不想这样做）。我不会推荐这样做，除非您真的无法使用复选框来完成此操作，因为这会使网站对未启用JavaScript的用户无法使用。 – Czechnology 2011-04-02 12:45:20

其实你可以通过将一个真实的复选框放在另一个元素上，并给它0％的不透明度，并根据需要设置一个高度和宽度来做到这一点。然而，基于复选框状态来做视觉事情将依赖浏览器对“：checked”伪类的支持，我认为这仍然是有限的。 – Pointy 2011-04-02 12:51:04

那么你必须使用JavaScript，它是保守的简单。你只需要改变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>

来源

2011-04-02 12:48:25 heroix

我一直在试图回答你的问题，我创建了一个小小的jQuery（1.5.2）代码。希望这可以帮助你看看，并告诉我这是你在找什么？或者如果你想要别的东西我也可以做到。在这个脚本上点击一个div元素，其ID为on_off（你也可以通过使用var！来选择它）和class（on_off_on）和off（on_off_off），以及你可以选择它们的方式，只需要到这个jsFiddle链接对于 live demo或者你可以看到下面的脚本 -

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 -

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代码 -

$(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');     

       } 
     }); 
    }); 
});

希望这会有所帮助！

来源

2011-04-02 14:52:36

你可以通过使用标签元素实现这一点没有JavaScript来包裹在div你想点击：

<input name="checkbox1" id="checkbox1" type="checkbox"> 
<label for="checkbox1"> 
    Click me 
</label>

和css：

input { 
    display:none; 
} 
:checked + label { 
    border: 1px solid rgba(81, 203, 238, 1); 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
}

看到这里与CSS样式的例子http://jsfiddle.net/vyP7c/761/

来源

2015-01-27 20:26:53

您可以通过隐藏复选框并对其标签进行样式设置，使用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

.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; 
}

您可以在这个简单的代码来看看在这里的行动：
JSFiddle

希望这有助于！ :)

来源

2015-04-01 13:38:58 nicosemp

这看起来不错，谢谢制作！ '＃checkboxes'代码的作用是什么？没有它的小提琴的工作原理是一样的。 – 2017-07-01 18:27:17

它只是增加特异性。如果你只在CSS中使用'input [type = checkbox]'，你会将规则应用到页面上的任何复选框。通过使用'＃checkboxes'，您只能将它应用于'id =“checkboxes”'在'div中的复选框。 – nicosemp 2018-01-01 18:32:09

创建一个像html复选框一样的div

回答

相关问题