Got it, let's walk through how to make this work. From what you described, you want the text inside an input field to be automatically selected (highlighted) whenever a corresponding checkbox is not checked. Here's a straightforward, vanilla JS approach that works reliably:

Step 1: Set up your HTML structure #

First, we'll create the checkbox and input field, giving them unique IDs so we can easily target them with JavaScript:

<div class="input-toggle-group">
  <label for="toggleCheckbox">
    <input type="checkbox" id="toggleCheckbox"> 保持输入框文本不被选中
  </label>
  <input type="text" id="targetInput" value="示例文本内容">
</div>

Step 2: Add the JavaScript logic #

We'll write a function that checks the checkbox state, and triggers the input text selection when the checkbox is unchecked. We'll also run this logic on page load (to handle the initial state) and whenever the checkbox is toggled.

// 获取元素引用
const checkbox = document.getElementById('toggleCheckbox');
const targetInput = document.getElementById('targetInput');

// 处理输入框选中状态的核心函数
function updateInputSelection() {
  if (!checkbox.checked) {
    // 当checkbox未选中时：选中输入框内所有文本
    targetInput.select();
    // 可选：同时让输入框获得焦点，确保选中状态立即可见
    targetInput.focus();
  } else {
    // 当checkbox选中时：清除文本选中状态（可选操作）
    window.getSelection().removeAllRanges();
    // 或者直接让输入框失去焦点
    // targetInput.blur();
  }
}

// 页面加载完成后执行一次，处理初始状态
document.addEventListener('DOMContentLoaded', updateInputSelection);

// 监听checkbox的切换事件，每次状态变化都执行处理函数
checkbox.addEventListener('change', updateInputSelection);

关键细节说明 #

• select()方法是实现核心：它会自动高亮输入框内的全部文本内容。
• 监听checkbox的change事件，确保用户切换复选框状态时逻辑立即触发。
• 加入DOMContentLoaded监听，保证页面初始加载时就能正确处理状态（比如复选框默认未选中时，输入框文本会直接被选中）。
• 如果你的元素是动态生成的（初始页面加载时不存在），需要用事件委托替代直接绑定事件，比如把change事件绑定到页面加载时就存在的父元素上。

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