Finding unchecked radio buttons through Jquery

I have this code below which I wanna use to find unchecked radio buttons. The problem I'm facing is that alert(unchecked) will always output '0' no matter how many unchecked radio buttons there are. alert(checked) works perfectly fine.

$('#button').on('click', function(){
        let checked = $('#class').find('.choice:checked').length;
        let unchecked = $('#class').find(!$('.choice').is(':checked')).length;
        
	alert(unchecked);
    });

I've followed and tried all the suggestion from this stackoverflow link: https://stackoverflow.com/questions/11159221/check-if-checkbox-is-not-checked-on-click-jquery

All of them didn't help.. :( Was wondering if you guys could lend a helping hand instead? :)

MichalOravec

5 years ago

Best Answer

Level 75

let unchecked = $('#class').find('.choice:not(:checked)').length;

And save $('#class') to variable

$('#button').on('click', function() {
    let el = $('#class');

    let checked = el.find('.choice:checked').length;
    let unchecked = el.find('.choice:not(:checked)').length;

    alert(unchecked);
});

1 like

SeanIz

5 years ago

Level 2

Omg, I feel like a total idiot. Thanks @michaloravec for pointing out the solution, it's so simple that I should've figured this out on my own. :/

SeanIz

5 years ago

Level 2

Sorry to bring this topic up again, but I ran into a small problem... I'm specifying it a little bit more so that I'm counting the number of divs that have the checked/unchecked radio buttons instead of the total radio buttons.

let el = $('#class');
	let checked = el.find('.choices:has(.choice:checked)').length;										
	let unchecked = el.find('.choices:has(.choice:not(:checked))').length;
                
        alert(unchecked);

Again, with this code my alert(unchecked) would give me a value of 4 (I have 4 questions) no matter how many unchecked boxes there are, whereas alert(checked) works fine.

Please or to participate in this conversation.