Question

我有一个代码可以检查单选按钮是否被选中以及是否设置了背景色。一切正常，我的问题是当我想选择另一个单选按钮时，结果是单击时选择了我所有的单选按钮，但只需要一个即可。

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

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

您可以对此进行测试。只需尝试选择另一个单选按钮，您就会看到已选择单选按钮（2个单选按钮）。

我想要实现的是，当您单击另一个单选按钮时，它需要删除此选中的类或任何其他想法。我无法在单选按钮之间切换。

Answer 1

给他们相同的name：

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

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input type="radio" name="radio">
<input type="radio" name="radio" checked>

Answer 2

<input type="radio" name="sameName">
<input type="radio" name="sameName">

这样设置他们的名字

Answer 3

单选按钮可以使用name属性轻松处理，以下代码可能会帮助您

<input type="radio" name="color">
<input type="radio"  name="color" checked>

$("input[name='color']").each(function () {
    if ($(this).is(":checked")) {
      $(this).css("background", "yellow");
    }
});

Answer 4

要在每个单选按钮的可见背景颜色下实现所需的行为，可以为每个单选<input />包装一个span元素，以实现单选按钮的背景色的视觉效果：

/* Reusable selection of radio buttons */
const radioButtons = $("input[type='radio']");

/* Updates selected radio button parent backgrounds based on checked state */
function updateBackground() {
  radioButtons.each(function() {
    $(this).parent().css('background', $(this).is(":checked") ? 'yellow' : '');
  });
}

/* Attach click behavior to each causing the background colors to update */
radioButtons.click(updateBackground);

/* Initalise the backgrounds and */
updateBackground();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Wrap each radio button with a span, which will be used to show a colored background 
when the radio button is checked -->
<span>
  <input type="radio" name="radio-group-name" checked>
</span>
<span>
  <input type="radio" name="radio-group-name">
</span>

是否可以使用JavaScript / jQuery解决这种情况？

4 个答案: