-2

我有这个...

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

我想要的只是在选中单选按钮时将 .article-option 更改为 .highlight 。请注意，有两个单选按钮（可以更多），如果未选中所选单选，则 .highlight 类必须消失。两个li永远不能同时拥有 .highlight。任一取决于单选按钮状态。

我怎么能用 jQuery 做到这一点？jsFiddle 可以很好。

谢谢。

4

6 回答 6

2

您需要检查所有单选按钮并检查:checked 检查：JSFiddle

于 2013-05-15T12:00:07.477 回答
1

查看 jQuery 的.change()方法。

$("input[name=optionsRadios]").on("change", function(event) { /* DO WORK */ });

您也可以使用.click()方法，但是，通过时间和经验，我发现在许多情况下 .change 只是简单地产生更好的结果。

另外，看看 jQuery 的:checked选择器。jQuery：检查

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

请参阅我为回答另一个 SO 问题而制作的这个旧 jsFiddle。它们显示了一些关于更改的差异，甚至单击其中一个中的复选框。

于 2013-05-15T11:52:59.623 回答
1 
$('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');
});
于 2013-05-15T11:53:38.613 回答
1 
$(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");

   });
});

使用上面的代码，这对你有用。

于 2013-05-15T12:00:28.113 回答
1

使用 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();
            }

        });
    })
});
于 2013-05-15T12:01:08.663 回答
1

演示在这里http://jsfiddle.net/2dJAN/30/

  $(".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;
}
于 2013-05-15T12:05:55.030 回答