将输入复选框转换为 2 个单独的按钮

Question

输入复选框在亮/暗模式之间切换。但是，我希望它作为 2 个独立的按钮。我该怎么办？

演示：https://jsfiddle.net/ot1ecnxz/1

HTML：

<input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" />
<hr />
<button type="button" data-bs-theme-value="light"> Light </button>
<button type="button" data-bs-theme-value="dark"> Dark </button>
<hr />
<p>
This is a sample text
</p>

JS：

function myFunction() {
    var element = document.body;
  element.dataset.bsTheme =
  element.dataset.bsTheme == "dark" ? "light" : "dark";
}

Answer 1

如果用 2 个专用按钮代码替换复选框来实现这一点应该是，

HTML：

<button type="button" data-bs-theme-value="light" onclick="setTheme('light')"> Light </button>
<button type="button" data-bs-theme-value="dark" onclick="setTheme('dark')"> Dark </button>
<hr />
<p>
    This is a sample text
</p>

Javascript：

function setTheme(theme) {
    document.body.dataset.bsTheme = theme;
}

Answer 2

您可以尝试以下方法：

document.getElementById("lightButton").addEventListener("click", function() {
    toggleMode('light');
});

document.getElementById("darkButton").addEventListener("click", function() {
    toggleMode('dark');
});

function toggleMode(mode) {
    var element = document.body;
    element.dataset.bsTheme = mode;
}

<link id="themeLink" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<button type="button" data-bs-theme-value="light" id="lightButton"> Light </button>
<button type="button" data-bs-theme-value="dark" id="darkButton"> Dark </button>
<hr />
<p>This is a sample text</p>