javascript - 选中时存储单选按钮的名称，然后在清除时将其删除

Question

这是我目前拥有的 HTML 代码:

JSFiddle

<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>

有没有一种可能的方法我可以有一个全局变量(比如 var test;)然后当单选按钮被选中时，将标签的名称存储为 test = label; (例如)。然后当它被移除时，它会调用变量并将其清空，因为现在该框已被取消选中？

我已经研究了一下，但找不到太多，对于基本的问题感到抱歉 - 我是 JS 的新手，正在从事我自己的项目，但似乎在基本的东西上遇到了困难。

Answer 1

当checkbox .is(':checked')

获取label的 text

var text = null;

$('input[type="checkbox"]').on('change', function() {

  if ($(this).is(':checked')) {
    var text = $(this).next('label').text();
    alert(text);
  } else {
    alert(text);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

第二个例子:

如果选中或未选中，您可以将名称存储在数组中:

var store = new Array();

$('input[type="checkbox"]').on('change', function() {

  if ($(this).is(':checked')) {
    var text = $(this).next('label').text();
    store.push(text);
  } else {
    var removeItem = $(this).next('label').text();

    store = $.grep(store, function(value) {
      return value != removeItem;
    });
  }

  console.log(store);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>