实现单选框选中存标签名、取消选中清空全局变量的方法

刚接触JavaScript不用慌，这个需求其实几步就能搞定！我来给你一步步拆解实现方法：

核心思路 #

先定义一个全局变量，然后给复选框绑定状态变化的监听事件，根据复选框是否被选中，来给变量赋值或者清空它。

完整实现代码 #

把下面的代码加到你的页面里（注意script要放在HTML元素后面，或者用DOM加载完成的监听）：

<div class="container-cell col1 row1 component-sortable component-droppable ui-block-a" style="width:48%; text-align: left; vertical-align: top;" data-col="1" data-row="1">
  <style>
    label[for="checkbox-1"].ui-checkbox-on {}
    label[for="checkbox-1"].ui-checkbox-off {}
  </style>
  <div data-control-type="checkbox" data-control-id="checkbox-1" data-control-name="checkbox-1" data-object-column="A">
    <input type="checkbox" name="checkbox-1" id="checkbox-1" data-theme="a">
    <label for="checkbox-1" data-translatable="Noise [A]">Noise [A]</label>
  </div>
</div>

<script>
// 定义全局变量，这样在页面的任何地方都能访问到它
var test;

// 获取你的复选框元素
const checkbox = document.getElementById('checkbox-1');

// 给复选框绑定状态变化的监听事件
checkbox.addEventListener('change', function() {
  if (this.checked) {
    // 当复选框被选中时，获取对应的标签文本并存入全局变量
    // 这里用nextElementSibling直接取到后面的label，也可以用更稳妥的选择器
    test = this.nextElementSibling.textContent.trim();
    // 可以打印出来看看效果，方便调试
    console.log('选中后test的值：', test);
  } else {
    // 取消选中时，清空全局变量
    test = '';
    console.log('取消选中后test的值：', test);
  }
});
</script>

额外说明 #

• 如果担心label和复选框的位置可能变动，你可以把获取label的代码改成更稳定的方式：

  test = document.querySelector('label[for="checkbox-1"]').textContent.trim();
  

  这个选择器通过for属性精准匹配对应的标签，不管位置怎么变都能拿到正确的元素。
• 全局变量test只要是在最外层声明（不在任何函数内部），就能在页面的其他JavaScript代码里直接访问和使用它。

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