时间戳

首页 > 解决方案 > 如何检查复选框是否被选中？

jquery - 如何检查复选框是否被选中？

问题描述

<span>在检查是否已选中复选框后，我想在 a 上附加一些文本。我在页面上有多个复选框，我只想附加<span>一次。我见过的所有解决方案似乎都不适合我。我试图通过以下方式检查：

if ($('input:checkbox[name="skills"]').prop('checked')) {
   $('#filter-7').append($('#headingSkills a').text());
}

和：

if ($('input:checkbox[name="skills"]').is(':checked')) {
    $('#filter-7').append($('#headingSkills a').text());
}

两者似乎都不起作用，我不想将 append() 添加到我的更改函数中，因为它会多次附加跨度，我只希望在选中一次复选框时附加它。

这是我的更改功能：

$('input:checkbox[name="skills"]').change(function () {
    var values = $('input:checkbox[name="skills"]:checked').map(function () {
      return '<span><button class="remove-selection" value="' + this.value.trim() + '"></button> ' + this.value.trim() + '</span>';
    }).get();

    $('#filter-7').append($('#headingSkills a').text());

    $('#filter-7-result').empty().append(values);
});

这是我的 HTML：

<h4 class="panel-title">
    <a role="button" id="button-7" data-toggle="collapse" data-parent="#accordion" href="#skillsCollapse"
                   aria-expanded="true" aria-controls="skillsCollapse">
                    Skills
    </a>
</h4>

<label>
    <input type="checkbox" name="skills" value="Accounting">Accounting</label>
<label>
    <input type="checkbox" name="skills" value="Administration">Administration</label>
<label>
    <input type="checkbox" name="skills" value="Budgeting">Budgeting</label>
<label>

当有人单击上面的复选框之一时，我想将按钮标题（技能）附加到：

<span id="filter-7"></span>

我知道这是一个常见问题，但我尝试过的任何方法似乎都不起作用。

标签： jqueryhtmlcheckboxappend

解决方案

问题是因为您每次运行此逻辑时都会附加文本节点。如果您只希望在选择每个值时显示一次值，请使用text()而不是append()：

$('#filter-7').text($('#headingSkills a').text());

推荐阅读