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());
}

似乎都不起作用，我不想在我的change函数中添加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>

我知道这是一个常见问题，但我尝试过的任何方法似乎都没有效果。

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

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

2 个答案: