选中/取消选中单选按钮

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，如果输入为:checked，则使用背景颜色放置一些CSS类。我实现了这一点，接下来要做的就是在用户单击单选按钮或任何其他（更好的）主意时删除该:checked。提交表单后，此代码检查输入的内容是否为:checked，问题是当我想选择另一个单选按钮时，我得到如下信息：

已选择1个和2个单选按钮，只能是2个"scripts": { "start": "expo start", "eject": "expo eject", "android": "expo start --android", "ios": "expo start --ios", "test": "jest"

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的问题在于，您永远不会从任何未选中的复选框中删除该类。另请注意，location.reload()仅在页面加载时运行（假设您尚未将其放置在事件处理程序中，但问题并未显示出来），因此您需要改为在{{1 }}事件处理程序：

each()

话虽如此，您要执行的操作可以通过使用CSS来更简单地实现：

change

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

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>

我希望这会有所帮助。