javascript - 从选中的复选框中获取文本

Question

我在一堆元素中有一组复选框:

<label class="control-label">Items</label>
<div class="controls">
    <div id="13" class="checkboxes columns-container columns-count-two">
        <div class="column-item">
            <label class="checkbox">
                <input name="13[]" value="Item 1" type="checkbox">Item 1
            </label>
        </div>
        <div class="column-item">
            <label class="checkbox">
                <input name="13[]" value="Item 2" type="checkbox">Item 2
            </label>
        </div>
        <div class="column-item">
            <label class="checkbox">
                <input name="13[]" value="Item 3" type="checkbox">Item 3
            </label>
        </div>
    </div>
</div>

我正在使用以下 JavaScript 代码尝试获取选中项目的文本，但它似乎不起作用。我不确定我错过了什么，非常感谢一些帮助

var checktext = $('#13 input:checkbox:checked').map(function() {
return $(this).next("label").text().split(' ').join('%20');
}).get();

Answer 1

您的选择器实际上有正确的标签。问题是您如何尝试获取 label文本。

您的选择器为您提供了 <input>已检查使用 .parent()你可以上去得到<label>然后你使用 .text()获取标签文本。最后使用.trim()删除文本末尾的多余空格。

$(this).parent().text().trim();

希望这有帮助:)

function checkChecked(){
  var checktext = $('#13 input:checkbox:checked').map(function() {
    return $(this).parent().text().trim();
  }).get();
  console.log(checktext)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="control-label">Items</label>
<div class="controls">
  <div id="13" class="checkboxes columns-container columns-count-two">
    <div class="column-item">
      <label class="checkbox">
                <input name="13[]" value="Item 1" type="checkbox">Item 1
            </label>
    </div>
    <div class="column-item">
      <label class="checkbox">
                <input name="13[]" value="Item 2" type="checkbox">Item 2
            </label>
    </div>
    <div class="column-item">
      <label class="checkbox">
                <input name="13[]" value="Item 3" type="checkbox">Item 3
            </label>
    </div>
  </div>
</div>

<button onclick='checkChecked()'>Check checked</button>