将 class 添加到选定的单选按钮

Question

如何添加和删除仅对一组单选按钮中选定的单选按钮的 class？

<table class="radioClass" role="set1"><tbody><tr><td><input type="radio" value=" Yes " id="" name="j_id0:j_id37:j_id41"> label for="j_id0:j_id37:j_id41:0">  Yes </label></td><td><input type="radio" value=" No " id="" name="j_id0:j_id37:j_id41"<label for="j_id0:j_id37:j_id41:1">  No </label></td></tr></tbody></table>

 $(document).ready(function(){
    $("input[type='radio']").click(function(){
        var radioValue = $("input:checked").val();
       if(radioValue){
            //alert("Your are a - " + radioValue);
            $("input:checked").toggleClass("checked");
        }
    });

JSFiddle.

Answer 1

首先从所有单选按钮中删除 checked class，然后添加到特定的选定单选按钮。您可以这样做：

if(radioValue){
     $("input[type='radio']").removeClass("checked");
     $(this).toggleClass("checked");
}

DEMO

Answer 2

应该没有必要添加class。如果您想设置所选单选按钮的样式或使用 jQuery 访问它，只需使用 :checked 伪选择器。 jQuery documentation and at W3C.

中提供了更多阅读材料

但是，如果您出于某种原因仍想使用额外的 class 来执行此操作，则应该这样做：

$("input[type=radio]").change(function() {
    //Whenever a radio button is changed.
    //Using click will not catch cases where it is changed for other reasons than clicks.
    $("input[type=radio]")
        .removeClass("checked")  //Remove the class from all elements.
        .filter(":checked")      //Filter out the checked ones.
        .addClass("checked")     //Add the class to those.
});

将 class 添加到选定的单选按钮

Add class to selected radio button

html

javascript

jquery

radio-button