將CSS添加到單選按鈕以選中並清除JS中未選中的CSS

Question

如何設置僅選中狀態的單選按鈕的樣式並清除它？ 我嘗試了幾種方法。 還沒結算

$('input:radio').on('click', function () {
    var $field_type = $("[name=field]:checked");
    #and other field types doing the same thing
    $("label[for='" + $field_type.attr('id') + "']").css({'border': '2px solid #333'})

我還嘗試了$("label[for='" + $(this).attr('id') + "']").css({'border': '2px solid #333'}) 。 它做同樣的事情。

Answer 1

 $('input:radio').on('click', function () { $('input[name="RD"]').next().css({'border': 'none'}); $("label[for='" + $(this).attr('id') + "']").css({'border': '2px solid #333'}) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="RD" id="RD1"/><label for="RD1">radio1</label> <br> <input type="radio" name="RD" id="RD2"/><label for="RD2">radio2</label> 

Answer 2

最好的方法是簡單地編寫一個CSS選擇器，該選擇器在選中單選按鈕時會彈出。 無需JavaScript。

但是請記住，並非所有瀏覽器都允許以您喜歡的任何方式設置單選按鈕的樣式。 但是，可以輕松設置與之配套的標簽元素的樣式：

 /* This rule will only be appled when the radio button is selected. but, not all browsers allow radio button styling. */ input[type='radio']:checked { background-color:yellow; } /* This rule will affect the label that comes after the checked radio button: */ input[type='radio']:checked + label { border:1px solid red; } 

 <input type="radio" name="test" id="test" value="on"><label for="test">On</label> <input type="radio" name="test" id="test2" value="off"><label for="test2">Off</label> 

這是一個有趣的鏈接 ，顯示了如何輕松自定義按鈕和復選標記。