javascript - 创建一个复选框，注释输入/输出 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>