选中/取消选中单选按钮

Question

$("input[type='radio']").each(function() {
  if ($(this).is(":checked")) {
    $(this).css('background', 'blue');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" data="cool" name="cool" checked="checked">
<input type="radio" data="cool" name="cool">
<input type="radio" data="cool" name="cool">

我的方法是首先检查我的输入是否为:checked，如果是，则放置一些带有背景颜色的 CSS 类。我实现了这一点，接下来我想要在用户单击单选按钮或任何其他（更好的）想法时删除 :checked。提交表单后，此代码检查输入是否为:checked，问题是当我想选择另一个单选按钮时，我得到如下内容：

1和2单选按钮被选中，应该只有2个:checked

Answer 1

您需要添加 else 来移除蓝色，例如：

$("input[type='radio']").each(function () {
   if ($(this).is(":checked")) {
      $(this).css('background', 'blue');
   }else{
     $(this).css('background', 'white');
   }
});

您还可以为这些收音机附加点击事件，例如：

$("body").on("click", "input[type='radio']", function () {
    $("input[type='radio']").css('background', 'white');
    $(this).css('background', 'blue');
});

Answer 2

您的 JS 的问题是您永远不会从任何未选中的复选框中删除该类。另请注意，each() 仅在页面加载时运行（假设您没有将它放在事件处理程序中，但问题没有显示），因此您需要在 change 事件处理程序中运行您的逻辑：

var $radio = $("input[type='radio']").on('change', function() {
  $radio.removeClass('blue');
  $(this).toggleClass('blue', this.checked);
});

话虽如此，使用 CSS 可以更简单地实现您想要做的事情：

input {
  visibility: hidden;
}
input:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #CCC;
  visibility: visible;
}

input:checked:before {
  background-color: blue;
}

<input type="radio" data="cool" name="cool" checked="checked">
<input type="radio" data="cool" name="cool">
<input type="radio" data="cool" name="cool">

Answer 3

我认为您的代码的问题在于您使用的是each 事件而不是change 或click 事件。这意味着您正在尝试更改单选按钮的颜色，甚至在用户执行任何操作之前。阅读以下代码，这将解决提交表单和自定义单选按钮的问题：

$(".radio-button").click(function() {
  $(this).addClass("blue-background");
  $(this).siblings().removeClass("blue-background");
  var radioID = $(this).data('radio');
  $('#' + radioID).attr("checked", "checked");
  if ($('#' + radioID).siblings(":checked")) {
    $('#' + radioID).siblings().removeAttr("checked");
  }
});

.blue-background {
  background-color: blue;
}

input[type='radio'] {
  visibility: hidden;
}

.radio-button {
  height: 15px;
  width: 15px;
  margin: 5px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <input type="radio" id="radio1" data="cool" name="cool" checked="checked">
  <input type="radio" id="radio2" data="cool" name="cool">
  <input type="radio" id="radio3" data="cool" name="cool">
  <div class="radio-button" data-radio="radio1"></div>
  <div class="radio-button" data-radio="radio2"></div>
  <div class="radio-button" data-radio="radio3"></div>
</div>

我希望这会有所帮助。