Question

为了造型目的，我使用UL和li类来保存一些表单选择选项。我将隐藏单选按钮，然后使用表单提交上的值。我想出了在单击<li>时如何检查单选框但由于某种原因所选的类没有添加到保存单选按钮的<li>。

下面是代码：

<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>

下面是我的javascript，这适用于在点击li但未设置所选类时将广播设置为已选中：

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

这是我先尝试但没有工作

$('.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

这是一个解决方案：

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

.attr('checked','checked')正在设置元素的属性。

使用.prop('checked')，问题应该解决！

将li的类更改为活动类

2 个答案: