Jquery 更改单选按钮select的包含html元素的背景色

我有这个

<ul class="article-types">
<li class="article-option">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="first" value="option1">
        Lorem
    </label>
    <p>Lorem ipsum dolor sit amet</p>
</li>
<li class="article-option">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="second" value="option2">
        Ipsum
    </label>
    <p>Lorem ipsum dolor sit amet</p>
</li>

洛勒姆
Lorem ipsum dolor sit amet



乱数假文
Lorem ipsum dolor sit amet

我想要的只是将.article选项更改为.highlight（当选中单选按钮时）。请注意，有两个单选按钮（可以更多），如果未选中所选单选按钮，则class.highlight必须消失。两个li永远不会有。同时突出显示。取决于radiobutton状态的任意一个

如何使用jQuery实现这一点？jsFiddle可能很好

谢谢。

看看jQuery的方法

你也可以使用这种方法，但是，通过时间和经验，我发现很多情况下，改变只会产生更好的结果

另外，看看jQuery的

：checked

选择器

看看这个我用来回答另一个问题的老问题。它们显示了一些关于更改的差异，甚至单击其中一个复选框

---

您需要查看所有单选按钮并检查

：checked

请查看：

---

使用上面的代码，这将对您有效。

使用jquery，您可以使用父函数

$(document).ready(function() {
    $("input[type='radio']").each(function(){
        $(this).click(function(){
            $("input[type='radio']").is(":not(':checked')").each(function(){
                //in css set colour
                $("this").parent().css();
            }
            $("input[type='radio']").is(":checked").each(function(){
                //in css set colour
                $("this").parent().css();
            }

        });
    })
});

演示在这里

---

你试过什么了？这不是一个给我代码的网站。+你说过“JSFIDLE可以很好”，那么提供一个人可以用叉子怎么样？谢谢。简单的工作。

if ($("input[name=optionsRadios]").is(":checked");) { /* DO WORK */ }

$('input[type=radio]').click(function(){
    $('.article-types li').attr('class' , 'article-option');
    if($(this).is(':checked'))
        $(this).parent().parent().addClass('highlight').removeClass('article-option');
    else
        $(this).parent().parent().removeClass('highlight').addClass('article-option');
});

$(document).ready(function(){
  $('input[type=radio]').click(function(){
      //this will reverse the previous clicked radio class
      $(".highlight").addClass("article-option").removeClass("highlight"); 
      $(this).closest('li').find(".article-option").addClass("highlight").removeClass("article-option");

   });
});

$(document).ready(function() {
    $("input[type='radio']").each(function(){
        $(this).click(function(){
            $("input[type='radio']").is(":not(':checked')").each(function(){
                //in css set colour
                $("this").parent().css();
            }
            $("input[type='radio']").is(":checked").each(function(){
                //in css set colour
                $("this").parent().css();
            }

        });
    })
});

  $(".radio").click(function(){
    $( ".article-option" ).removeClass('highlight')
    if($(".radio").is(':checked')){
        $(this).closest('li').addClass('highlight')
        }
});


.highlight {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}