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

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 = label;(例如(。然后当它被删除时，它会调用变量并将其清空，因为该框现在已经未选中？

我已经研究了一下，但找不到太多，对不起基本的 q - 我是 JS 的新手并承担自己的项目，但似乎在基本的东西上挣扎。

Answer 1

checkbox .is(':checked')时获取标签的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>

第二个例子：

如果在array中选中或取消选中，则可以存储名称：

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>

Answer 2

你可以试试下面的代码

var test = "";
$('input[type="checkbox"]').on('change', function() {
  if ($(this).is(':checked')) {
    test = $(this).next('label').text();
    console.log("test value: " + test)
  } else {
    test = "";
    console.log("test value: " + test)
  }
});

body {
  font: 13px Verdana;
}

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