根據是否勾選復選框來更改復選框的值？

Question

我正在制作這個文本代碼生成器，我有點卡住了。 在自定義面板中，您有5個復選框。 它們是粗體，斜體，下划線，刪除線和混淆。 它們都具有當前“錯誤”的值。

我想要發生的是，當選中復選框時，其值將更改為“true”。 為什么？ 當你得到代碼是這樣的事情：

<input type="checkbox" value="false" id="bold"/>
<input type="button" value="Give Code" onclick="printCode()"/>
<script>
function printCode() {
document.getElementById("code").innerHTML= bold.value;
}
</script>
<p id="code"></p>

在此示例中，按下按鈕時，它將打印出復選框的值。 它總是打印出“假”。 我想要它，以便勾選復選框時，其值將更改為“true”。 這樣，當它打印出值時，它可以是“真”或“假”。

我知道jQuery可能是解決方案，但我對它很新。

感謝您的支持！

Answer 1

為什么不使用選中的狀態，這將是真/假，取決於是否選中復選框，不需要值？

<input type="checkbox" value="false" id="bold" />
<input type="button" value="Give Code" onclick="printCode()" />
<script>
    function printCode() {
        document.getElementById("code").innerHTML = document.getElementById("bold").checked.toString();
    }
</script>
<p id="code"></p>

小提琴

Answer 2

使用bold.checked而不是bold.value

document.getElementById("code").innerHTML= bold.checked;

如果您仍想使用bold.value，請將onClick函數添加到復選框：

<input type="checkbox" id="bold" value="false" onclick="this.value = this.value == 'false' ? 'true' : false"/>