将li的班级更改为现役班级

Question

For styling purposes im using a UL and li class to hold some form selection options. Im going to make the radio button hidden and then use the value on form submit. I figured out how to check the radio box when the <li> is clicked but for some reason the selected class isnt added to the <li> which holds the radio button.

Heres the code:

<ul class="options-num">
    <li><input type="radio" name="group1" value="2000"> 2,000</li>
    <li><input type="radio" name="group1" value="2000"> 4,000</li>
    <li><input type="radio" name="group1" value="2000"> 6,000</li>
    <li><input type="radio" name="group1" value="2000"> 8,000</li>
    <li><input type="radio" name="group1" value="2000"> 10,000</li>
</ul>

Below is my javascript, this works for setting radio as checked when li is clicked but doesnt set selected class:

$(".options-num > li").click(function(){
    $(".options-num > li").find('input[type="radio"]').removeAttr('checked');
    if($(this).find('input[type="radio"]').attr('checked','checked')) {
        $(this).parent().addClass("selected");
    }
});

This is what i tried first but didnt work

$('.options-num li').click(function(){
    var radio = $(this).children('input[type=radio]');
    if (radio.is(':checked')) {
        $(this).parent().addClass("selected");
        //$("#foo").toggleClass(className, addOrRemove);
        //$(this).('.options-num li').addClass('selected');
    } /*else {
        $(this).parent('li').removeClass('selected');
    }
})

Answer 1

here is a solution:

https://jsfiddle.net/bb6fp28p/

<ul class="options-num">
            <li><input type="radio" name="group1" value="2000"> 2,000</li>
            <li><input type="radio" name="group1" value="2000"> 4,000</li>
            <li><input type="radio" name="group1" value="2000"> 6,000</li>
            <li><input type="radio" name="group1" value="2000"> 8,000</li>
            <li><input type="radio" name="group1" value="2000"> 10,000</li>
</ul>

CSS:

.selected{
    background:green;
}

JS

$('.options-num li').click(function(){
    $('.options-num li').removeClass('selected');
    $(this).addClass('selected');
    $(this).find('input').prop('checked', true);
});

Answer 2

The .attr('checked','checked') is setting the attribute of the element.

Use .prop('checked') and the problem should be fixed!