如何检查是否选中了复选框？

Question

我想在检查是否选中了复选框之后，将一些文本添加到<span>中。页面上有多个复选框，我只想追加一次<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()添加到我的change函数中，因为它会多次追加span，而且我只希望在选中一次复选框时将其追加。

以下是我的更改功能：

$('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>

我知道这是一个常见的问题，但我尝试过的一切似乎都没有用。

Answer 1

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

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

Answer 2

使用is(':checked')检查是否选中复选框

​

$('.check').change(function(e){
 var text='';
   $('.check').each(function(e){
       if($(this).is(':checked'))
       text='checked';
   })
   $('.content').html(text) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="content"></span>
<input type="checkbox" class="check">one
<input type="checkbox" class="check">two
<input type="checkbox" class="check">three
<input type="checkbox" class="check">Four

​