js 的input checked 自动选中通过点击事件选中

### 如何设置HTML或JavaScript中的`input`元素默认被选中 #### 使用HTML属性实现默认选中 在HTML中，可以通过为`<input>`标签添加特定的属性来实现某些类型的输入框默认被选中。对于单选按钮（radio）、复选框（checkbox）以及文本框（text），可以分别通过以下方式完成： - **单选按钮默认选中** 单选按钮组中，默认选中的选项需要在其对应的`<input type="radio">`标签上添加`checked`属性[^1]。 ```html <label><input type="radio" name="gender" value="male" checked> Male</label> <label><input type="radio" name="gender" value="female"> Female</label> ``` - **复选框默认选中** 对于复选框，同样可以在其`<input type="checkbox">`标签上添加`checked`属性[^4]。 ```html <label><input type="checkbox" name="hobby" value="reading" checked> Reading</label> <label><input type="checkbox" name="hobby" value="sports"> Sports</label> ``` - **文本框默认聚焦并全选内容** 如果希望文本框的内容在页面加载时自动被选中，则可以直接利用`autofocus`属性让光标定位到该输入框，并结合JavaScript调用`select()`方法[^2]。 ```html <input type="text" id="default-selected-textbox" value="This is preselected"> <script> document.getElementById('default-selected-textbox').select(); </script> ``` #### 利用JavaScript动态控制默认选中行为 如果需要更灵活地操作表单项的状态，比如基于条件判断决定某个项目是否应该处于已选状态或者高亮显示等效果，那么借助JavaScript将是更好的解决方案之一。 - **双击按钮触发文本框内容的选择功能** 下面这个例子展示了当用户点击一个按钮之后，指定ID的文本框内的文字会被完全选定的效果。 ```html <input type="text" id="text-box" size="20" value="Hello world!"> <button onclick="selectText()">Select text</button> <script> function selectText() { const input = document.getElementById('text-box'); input.focus(); // 确保获得焦点后再执行选择动作 input.select(); // 调用API选取全部字符范围 } </script> ``` - **精确设定部分区域作为当前活动位置** 此外还有更加精细的操作手段可供选用，例如只突出显示字符串的一部分而不是整个字段值的情况下面这段脚本就实现了这样的需求[^3]。 ```html <p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p> <p><button οnclick="SelectText()">选择文本</button></p> <script> function SelectText() { var input = document.getElementById('mytextbox'); input.focus(); // 获取焦点以便能够正常工作 input.setSelectionRange(2, 5); // 参数分别为起始索引结束索引（不包含） } </script> ``` 综上所述，在实际开发过程中可以根据具体业务场景自由组合上述技术要点达成预期目标。