仅在传递输入时如何检索复选框旁边的文本

Question

我有这样的设置：

<label><input type="checkbox" class="box" checked>Frankie</label>
<label><input type="checkbox" class="box" checked>Samuel</label>

然后我有一个只能听.on('change'...)的函数所以在这个函数的范围内，当我通过：console.log(this)时，我只在控制台中得到<label><input type="checkbox" class="box" checked>。我对这个结果并不感到惊讶，但与此同时，我不确定我能做些什么来获得与他们相关的文本，即Frankie和Samuel。

问题：如何仅在传递输入时访问文本？

注意：我更喜欢按原样保留包装，理想情况下保持原样。我不确定是否允许为此应用程序添加id到元素。

Answer 1

如果您对使用value属性不感兴趣，请尝试以下方法：

function getNextText(el) {
   return el.parentElement.innerHTML.match(/\>([\w\s\d]+)/)[1];
}

$('.box').on('change', function(e) {
   var adjacentText = getNextText(this);
  
   console.log(adjacentText);
})

它运作良好。