CODEWITHSUNDEEP
javascripthtmlcsscheckbox
Ayoub
Ayoub

Reputation: 25

create a check box that comments in/out a CSS line

So what i want to do is add border radius to a div when the user checks the check box and remove it when the check box is unchecked here is how my code looks like:

the html:

<div id='box'></div>

Add border radius

the css:

#box {
    height:300px;
    width:300px;
    background-color: #444;
    float:right;
}

Upvotes: 0

Views: 215

Answers (2)

Dilantha
Dilantha

Reputation: 1634

This is how you do it with out using jquery

<script type="application/javascript">

function myFunction()
{
    var checkbox = document.getElementById("mycheckbox");
    if(checkbox.checked)
    {
        document.getElementById("box").className = "border-radius";
    }
}

</script>
<style>
.border-radius{
    border-radius : 5px;
    -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
}
</style>

<input type="checkbox" onchange="myFunction()" id="mycheckbox"/>
<div id="box">
</div>

Upvotes: 1

mohkhan
mohkhan

Reputation: 12305

With jQuery it is very simple.

define a CSS class like this...

.br{
    border-radius : 5px;
    -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
}

If your checkbox looks like this

<input type="checkbox" id="cb"/>

then your JS code would look like this...

<script>
$(function(){
    $("#cb").on("click", function(){
        $("#box").toggleClass("br");
    });
});
</script>

Upvotes: 1

Related Questions