jquery uncheck dynamic checkbox

Question

I am using load() to import some html into my page which includes some checkboxes. I'd like to have a refresh button which clears any checked checkboxes but I have been unable to get this working. Please let me know what else I can try. This selector does find all checkboxes which are 'checked' but none of the functions uncheck the checkbox.

$('#reset_button').on('click',function() 
    {
        $(':checkbox:checked').each(function()
        {
            //alert($(this).val())});
            $(this).prop('checked',false);
            $(this).attr('checked',false);
            $(this).val('off');
            $(this).removeAttr('checked');
        })
    }
    );

Conclusion note, I had to remove a class from the parent element which was styling the checkbox. the functions provided below were updating the status of the checkbox to 'unchecked' but item was not being redrawn due to styling

try $(':checkbox:checked').each(function(i,v) { //alert($(this).val())}); $(v).prop('checked', false); }) — guradio
– guradio, Commented Aug 17, 2016 at 8:19

Jeni · Accepted Answer · 2016-08-17 09:05:21Z

1

Here is the single line code that uncheck all the checked checkboxes. (This example illustrates both check and uncheck all checkboxes using jquery) Set prop of the checkbox to false

$("input:checkbox").prop('checked', false);

answered Aug 17, 2016 at 9:05

Jeni

4303 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2016-08-17 08:33:39Z

0

Pass arguments to the function to access each of the checked element and then set it checked attribute to false using

$(item).prop('checked', false);

$(function(){
  $('#generate').on('click', function(){
    $('#check').append('<input type="checkbox" checked="checked"/>');
    $('#check').append('<input type="checkbox" checked="checked"/>');
  })
  $('#reset_button').on('click',function() 
    {
        $(':checkbox:checked').each(function(index, item)
        {
            //alert($(this).val())});
           $(item).prop('checked',false);
        })
    }
    );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="generate">Generate boxes</button>
<div id="check"></div>
<button id="reset_button">Reset</button>

answered Aug 17, 2016 at 8:33

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

3 Comments

nick robinson Over a year ago

thanks for this. there must be something else wrong though as it still wont update. ive commented out my code and copied in yours. it maybe has something to do with using the load() function to insert html rather than adding elements via jquery

nick robinson Over a year ago

actually it is setting the property of checked to false, but for some reason the checkbox isnt being unchecked. testing in chrome

Shubham Khatri Over a year ago

how are you loading your checkboxes. and maybe try it in another browser

Gaetan · Accepted Answer · 2016-08-17 09:04:13Z

0

You can add the same class for all your checkboxs and then use in your function :

checkboxes = document.getElementsByClassName('name');
var n=checkboxes.length;
for(var i=0;i<n;i++) {
    checkboxes[i].checked = false;
}

Hope it helps

answered Aug 17, 2016 at 9:04

Gaetan

3251 silver badge15 bronze badges

Collectives™ on Stack Overflow

jquery uncheck dynamic checkbox

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related