創建一個複選框，註釋進出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>