Question

我正在测试一个js函数来检查和取消选中一个带有单独div的复选框，该div也会改变颜色。

当手动将复选框ID输入到函数中时，以下脚本有效，但当我尝试将其作为参数传递时，它不起作用。我做错了吗？

<form action="#">
    <input type="checkbox" id="joe" name="joe">

<div id="container" style="background-color: red; width: 200px; height: 200px;" onclick="selected(this, 'joe')"></div>

<script>
    function selected(elmnt, id2check) {
        var x = document.getElementById("id2check").checked;
        if(x == false) {
                elmnt.style.backgroundColor = "blue";
                document.getElementById("id2check").checked = true;
        } else {
                elmnt.style.backgroundColor = "red";
                document.getElementById("id2check").checked = false;
        }
    }   
</script>

更新：

啊，刚刚想通了。本教程我基于传递值的使用引号。我拿走了它们，它现在有效。：）

Answer 1

您应该将id2check放在没有引号的位置。因为引号是字符串而不是变量，并且您想要使用变量。（传递给函数的那个）。

<script>
    function selected(elmnt, id2check) {
        var x = document.getElementById(id2check).checked;
        if(x == false) {
                elmnt.style.backgroundColor = "blue";
                document.getElementById(id2check).checked = true;
        } else {
                elmnt.style.backgroundColor = "red";
                document.getElementById(id2check).checked = false;
        }
    }   
</script>

Answer 2

如果您只想更改样式，也可以使用纯CSS：

<style>
#container {
    background-color: red;
    display:block;
    width: 200px;
    height: 200px;
}
#joe:checked + #container {
    background-color: blue;
}
</style>
<form action="#">
    <input type="checkbox" id="joe" name="joe">
        <div id="container"></div>

这是一个例外： JSFiddle

如果你想使用javascript，我会把它写得有点不同：

<script>
function selected(elmnt, id2check) {
    var x = document.getElementById(id2check);
    // Check if the element exists
    if (x) {
        x.checked = (!x.checked); // Turns true to false and false to true
        elmnt.style.backgroundColor = (x.checked ? "red" : "blue");
        // (isChecked ? ifTrue : ifFalse)
    }
}   
</script>

希望这有助于你。

单击div以选中复选框

2 个答案: