How do I check if a checkbox is checked?

Question

I would like to append some text to a <span> after checking whether or not a checkbox has been checked. I have multiple checkboxes on the page and I only want to append the <span> once. All the solutions I have seen don't seem to work for me. I have tried to check by:

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

And:

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

Neither seem to work and I don't want to add the append() to my change function because it appends the span multiple times and I only want it to be appended when the checkbox is checked once.

Here is my change function:

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

Here is my 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>

When someone clicks on one of the checkboxes above, I want to append the button title (Skills) to:

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

I know this a commonly asked question but nothing I have tried seems to work.

Your code appears to work fine: https://jsfiddle.net/085vg97d/. What exactly is the issue? Have you checked the console for errors? — Rory McCrossan, Aug 14 '19 at 11:11
if it's in your change function, you can just use `this.checked` to see if your current input is checked or not — Pete, Aug 14 '19 at 11:13
@RoryMcCrossan sorry I should have added my HTML structure, I have updated my question to include it as the text I am trying to append is not the value from the checkbox but from a button. — Neelam Khan, Aug 14 '19 at 11:20
[https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — Mike Sar, Aug 14 '19 at 11:23
Thanks for editing, but your code still works absolutely fine: https://jsfiddle.net/cofkqn1a/ — Rory McCrossan, Aug 14 '19 at 11:25
I am trying to attempt to append the value of "Skills" to the span when a checkbox is selected, however with the append being in the change function it gets appended every time a checkbox is checked and I don't want to do that. — Neelam Khan, Aug 14 '19 at 11:30
Here https://jsfiddle.net/neelam_cite/xw420s3g/2/ is an updated fiddle with the problem, you can see everytime a checkbox is clicked "Skills" is appended multiple times, I want to append it just once. To do that I was checking to see if the checkbox has been checked but wasn't able to as none of my checks were working @RoryMcCrossan — Neelam Khan, Aug 14 '19 at 13:11
So change `append()` to `text()`: https://jsfiddle.net/4eag3wh1/ — Rory McCrossan, Aug 14 '19 at 13:12
Thank you @RoryMcCrossan that fixed it! I can accept that as the answer if you want to answer the question or I can add it as an answer. — Neelam Khan, Aug 14 '19 at 13:17

score 1 · Accepted Answer · answered Aug 14 '19 at 13:20

1

The issue is because you're appending the text node every time this logic runs. If you only want the value to be shown once as each value is selected use text() instead of append():

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

answered Aug 14 '19 at 13:20

Rory McCrossan

331,213
40
305
339

Deepak A · Answer 2 · 2019-08-14T11:21:16.207

0

Use is(':checked') for checking if checkbox 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

edited Aug 14 '19 at 11:21

answered Aug 14 '19 at 11:15

Deepak A

1,624
1
7
16

Given that the OP's code already works I don't see the benefit of answering this until they've clarified the problem. Also note that their current logic is more efficient that this – Rory McCrossan Aug 14 '19 at 11:19

How do I check if a checkbox is checked?

2 Answers2