Create a div that acts like an html checkbox_问答_开发者

Create a div that acts like an html checkbox

开发者 https://www.devze.com 2023-02-21 20:02 出处：网络

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?

相关专题：css javascript

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?

If开发者_开发问答 you have created such a script please share it.

Thank you for your help in advance.

You could do this very easily with only CSS code by hiding the checkboxes and styling their labels like so:

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

You can take a look at this simple code in action here:
JSFiddle

Hope this helps! :)

You could implement this without javascript by using the label element to wrap the div you want clickable:

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

and 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/

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 div element 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 demo or you can see the script below --

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 Code --

$(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!

Well you have to use javascript and it is prety simple. You just need to change css style of div on action.

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