JavaScript实现点击checkbox显示textarea、点击外部区域隐藏对应textarea功能

你原有代码的核心问题出在拼写错误、全局点击事件的判断逻辑缺失以及变量未定义，修复后可实现需求：点击checkbox显示对应textarea，点击除该checkbox和textarea外的任意区域自动隐藏textarea。

修复要点 #

• 修正CSS中lable的拼写错误（应为label）
• 阻止checkbox点击事件冒泡，避免触发全局点击事件直接隐藏textarea
• 给textarea也增加点击冒泡阻止，避免用户点击textarea输入时直接触发隐藏
• 移除未定义的description变量，直接通过移除所有input的active类实现统一隐藏逻辑

完整可运行代码 #

HTML（和原有逻辑一致，无修改） #

<p class="items">
   <span class="label">example1</span>
   <span class="label-items">
      <label class="label-item" for="Others">
        <input type="checkbox" name="Others" id="Others" class="required-description">
         Others
        <textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>                                            
     </label>
   </span>                                    
</p>

<p class="items">
   <span class="label">example2</span>
   <span class="label-items">
       <label class="label-item" for="Yes">
          <input type="checkbox" name="Yes" id="Yes" class="required-description">
          Yes
          <textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
       </label> 
   </span>
</p>

<p class="items">
    <span class="label">example3</span>
    <span class="label-items">
      <label class="label-item" for="ok">
         <input type="checkbox" name="ok" id="ok" class="required-description">
         Yes
          <textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
     </label> 
    </span>
</p>

CSS（仅修正拼写错误，补充了缺失的自定义变量定义） #

:root {
    --txt: #333;
    --c2: #2385bb;
}
.items{
    border: 1px solid var(--txt);
    padding: .5rem;
    border-radius: 10px;
}

p > span.label{
    width: 30%;
    display: block;
}

p > span.label-items{
    width: 70%;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}
/* 修正原lable拼写错误 */
p > span.label-items > label.label-item{
    display: flex; 
    align-items: center; 
    width: 100%;
}

.description{
    border: 2px solid var(--c2);
    background-color: #e6eef7;
    border-radius: 10px;
    outline: none;
    position: absolute;
    left: 20%;
    top: 10%;
    width: 50%;
    z-index: 1;
    padding: 1rem;
    display: none;
}

p > span.label-items > label.label-item > input.active ~ .description{
    display: block;
}

JS #

const requiredDescription = document.querySelectorAll(".required-description");      

requiredDescription.forEach(item => {
    item.addEventListener('click', function(e){
        // 阻止事件冒泡，避免触发window的点击事件
        e.stopPropagation();
        item.classList.toggle('active');
        // 勾选状态和显示状态同步，取消勾选时直接隐藏textarea
        if(!item.checked) {
            item.classList.remove('active');
        }
    });
    // 点击textarea时不触发隐藏
    const textarea = item.nextElementSibling;
    textarea.addEventListener('click', (e) => {
        e.stopPropagation();
    })
});

window.addEventListener("click", function(){
    // 点击外部区域统一隐藏所有textarea
    requiredDescription.forEach(item => {
        item.classList.remove('active');
        // 可选：隐藏时同步取消checkbox勾选
        // item.checked = false;
    })
});

优化建议 #

• 如果不需要取消勾选checkbox后自动隐藏，可以删掉JS中if(!item.checked)的判断逻辑
• 可以给textarea增加关闭按钮，方便用户主动关闭，不用点击外部区域
• 可以优化textarea的定位逻辑，避免超出可视区域，也可以改为跟随对应checkbox的位置显示

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper