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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

最好的方法是简单地编写一个CSS选择器，在选中单选按钮时启动。 无需JavaScript。

但请记住，并非所有浏览器都允许以您喜欢的任何方式设置单选按钮的样式。但是，随身携带的标签元素可以轻松设置样式：

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Here's an interesting link ，展示了如何轻松自定义按钮和复选标记。

Answer 3

你可以添加你的风格

radiobutton:checked {
  check-radio-button-style: whatever;
}

radiobutton {
  un-checked-style: whatever;
}

将css添加到单选按钮，以便在js中取消选中已检查和清除的css

3 个答案: