Remove class on radio's that are not checked

Question

So i have this code

<ul id="id_priori">
    <li>
        <label for="id_priori_0">
            <input id="id_priori_0" name="priori" type="radio">Hola
        </label>
    </li>
</ul>

And this code

$("#id_tipo").on('click', 'li', function () {
    var self = $(this),
        radio = self.find(":radio")[0];

    radio.checked = !radio.checked;

    self.toggleClass('on', radio.checked);

})
    .find(":radio").each(function () {
    $(this).closest('li').toggleClass('on', this.checked);
});

What i want is to unclass all the labels whose radio's arent checked , any idea ?

Are those radios connected? I mean, can be more than one checked? — EduSanCon, Jul 27 '14 at 19:20
might help: http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label — daghan, Jul 27 '14 at 21:18

EduSanCon · Accepted Answer · 2014-07-27T21:10:43.407

1

$(":radio:not(checked)").each(function () {
    $(this).closest('li').removeClass('on');
});

Anyway, assuming all radios are connected, and there is always only one checked, the whole code could be simpler:

$("#id_priori").on('click', 'li', function () {
    $(this).find(':radio').prop('checked', true);
    $(this).addClass('on').siblings().removeClass('on');
});

Take a look at this Fiddle. We can work from this point

edited Jul 27 '14 at 21:10

answered Jul 27 '14 at 19:10

EduSanCon

1,749
1
11
9

It would work , but in my code when i click the li that has the label inside also checks the radio – Jul 27 '14 at 20:39
if you want, you can have your labels occuping all width of the li: [fiddle](http://jsfiddle.net/86PA4/1/) – EduSanCon Jul 27 '14 at 21:04
Not what i was looking for :/ – Jul 27 '14 at 21:05
does your code work where you click on the radio? I tried to test it on jsfiddle, and it didn't work for me. – EduSanCon Jul 27 '14 at 21:08
I've updated the code to check the radio when you click the li – EduSanCon Jul 27 '14 at 21:11

score 0 · Answer 2 · answered Jul 27 '14 at 19:11

0

Assuming you mean remove all class from each <label> add it in the find:

 .find(":radio").each(function () {
    if( !this.checked){
       $(this).parent('label').removeAttr('class');
    }
    $(this).closest('li').toggleClass('on', this.checked);
});

answered Jul 27 '14 at 19:11

charlietfl

170,828
13
121
150

score 0 · Answer 3 · answered Jul 27 '14 at 19:15

0

if you want to remove class just go with @littleLouito Code else if you want toggle try this one

   $(":radio:not(checked)").each(function () {
      $(this).closest('label').toggleClass("on", this.checked);
    });

answered Jul 27 '14 at 19:15

user3419304

249
2
4
20

Cool but for some reason when i click the label it doesnt does anything , its like if something is canceling it – Jul 27 '14 at 20:10

Remove class on radio's that are not checked

3 Answers3