能否用单个HTML checkbox元素替代JavaScript实现按钮切换？

First off, the syntax you proposed <input type="checkbox" class="toggler">Text Value</input> isn’t valid HTML. Input elements are void elements—they don’t have closing tags or allow child content like text inside them. But don’t worry, you absolutely can create a functional toggle button with just a single checkbox and CSS (no JavaScript required). Here’s how to do it right:

Working Solution with a Single Checkbox #

We’ll hide the default checkbox visual, use CSS pseudo-elements to add toggleable text, and leverage the :checked pseudo-class to switch states.

<input type="checkbox" class="toggler" data-on="Enabled" data-off="Disabled">

.toggler {
  /* Remove default checkbox styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #e0e0e0;
  font-size: 14px;
  position: relative;
}

/* Show "off" state text by default */
.toggler::before {
  content: attr(data-off);
  color: #333;
}

/* Update styling and text for "on" state */
.toggler:checked {
  background-color: #2196F3;
}

.toggler:checked::before {
  content: attr(data-on);
  color: white;
}

/* Add focus outline for accessibility */
.toggler:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

How This Works: #

• appearance: none strips away the default checkbox look, turning it into a clickable, customizable element.
• The ::before pseudo-element pulls text from the checkbox’s data-off and data-on attributes, switching content when the checkbox is toggled.
• All styling (colors, padding, rounded corners) mimics a standard button.
• The focus state ensures keyboard users can interact with the toggle easily.

This approach uses only one HTML element and pure CSS—no JavaScript needed, exactly what you requested.

内容的提问来源于stack exchange，提问作者Bagzli