创建一个复选框，注释进出CSS线

Question

所以我想要做的是添加边框半径到一个div当用户选中复选框，并取消它时，复选框未选中 这里是我的代码看起来像：

的HTML：

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

添加边框半径

的CSS：

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

Answer 1

用jQuery很简单。

定义CSS类这样的...

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

如果您的复选框看起来像这样

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

那么你的JS代码应该是这样的......

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

Answer 2

这就是你如何使用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>