如何用JavaScript获取元素ID并在函数内切换，实现复选框禁用textarea？

Hey there! Let's tackle your two technical needs step by step, and we'll also clean up that repetitive checkbox code while we're at it.

1. 获取元素ID并完成切换操作 #

First off, for getting an element's ID and performing a toggle (like showing/hiding, or switching a CSS class), here's a clean, reusable approach.

Let's say you want to toggle an element's visibility or a custom class. You can pass the target element's ID to a function, or even reference the triggering element's own ID if needed:

// 通用切换函数：支持切换显示状态或CSS类
function toggleElement(elementId) {
  const targetElement = document.getElementById(elementId);
  
  if (!targetElement) return; // 避免找不到元素报错
  
  // 选项1：切换元素的显示/隐藏
  targetElement.style.display = targetElement.style.display === 'none' ? 'block' : 'none';
  
  // 选项2（更推荐）：切换CSS类，方便控制样式（比如隐藏、高亮等）
  // targetElement.classList.toggle('is-hidden');
}

调用示例 #

If you're triggering this from a button or another element:

<button onclick="toggleElement('profile-panel')">切换面板</button>
<div id="profile-panel">用户信息面板</div>

If you need to get the ID of the element that triggered the function (e.g., a button toggling itself), you can pass this to the function:

function toggleSelf(element) {
  console.log('触发元素的ID:', element.id);
  element.classList.toggle('active');
}

<button id="toggle-btn" onclick="toggleSelf(this)">点击切换自身状态</button>

2. 用复选框控制textarea的禁用状态（优化版） #

Your current code uses 4 separate functions for each checkbox, which creates unnecessary repetition. Let's simplify this with a single reusable function and HTML data attributes to link checkboxes to their corresponding textareas.

Step 1: Update your HTML #

Add a data-target attribute to each checkbox, pointing to the ID of its related textarea. Also, note that checkboxes use checked instead of selected for their default state:

<!-- 复选框 -->
<input type="checkbox" name="detailsgiven" data-target="new_order_1" checked />
<input type="checkbox" name="detailsgiven" data-target="new_order_2" checked />
<input type="checkbox" name="detailsgiven" data-target="new_order_3" checked />
<input type="checkbox" name="detailsgiven" data-target="new_order_4" checked />

<!-- 对应的textarea -->
<textarea id="new_order_1"></textarea>
<textarea id="new_order_2"></textarea>
<textarea id="new_order_3"></textarea>
<textarea id="new_order_4"></textarea>

Step 2: Write the universal JavaScript function #

This function will handle all checkboxes by reading the data-target attribute and updating the textarea's disabled state:

function toggleTextareaDisabled(checkbox) {
  // 获取关联的textarea ID
  const targetTextareaId = checkbox.dataset.target;
  const textarea = document.getElementById(targetTextareaId);
  
  if (!textarea) return;
  
  // 复选框选中时，textarea启用；未选中时禁用
  textarea.disabled = !checkbox.checked;
}

// 推荐：用事件监听代替内联onchange（更易维护，代码分离）
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有目标复选框
  const checkboxes = document.querySelectorAll('input[name="detailsgiven"]');
  
  checkboxes.forEach(checkbox => {
    // 绑定change事件
    checkbox.addEventListener('change', () => toggleTextareaDisabled(checkbox));
    // 页面加载时初始化textarea状态（确保和复选框初始状态一致）
    toggleTextareaDisabled(checkbox);
  });
});

如果你偏好内联onchange #

If you want to stick with inline onchange attributes instead of event listeners, you can do this:

<input type="checkbox" name="detailsgiven" data-target="new_order_1" checked onchange="toggleTextareaDisabled(this)" />

The same toggleTextareaDisabled function works for all checkboxes—no need for 4 separate functions!

This approach keeps your code DRY (Don't Repeat Yourself), makes it easier to add more checkbox-textarea pairs later, and follows modern best practices.

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