Question

我有单选按钮，其中一个:checked的名称相同。当我单击另一个单选按钮时，它们都被选中。

我的代码是：

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

JS

$("input[type='radio']").each(function () {
    if ($(this).is(":checked")) {
    $(this).addClass("some");
   }
 });

CSS

  .some {
      background-color:#06c!important;
  }

我的方法是首先检查我的输入是否为:checked，如果输入为:checked，请放置一些具有背景颜色的CSS类。我实现了这一点，接下来要做的是，当用户单击单选按钮或任何其他（更好的）主意时，删除该https://jsfiddle.net/0ns58xcq/。现在，两个单选按钮都被选中。有人可以帮我吗？

提琴：

while

Answer 1

查看您的标记：

<input name="a" type="radio">
<input name="a "type="radio" checked>
              ^
              ----- There is a space

删除空间，它应该可以工作。

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

Answer 2

如果您正在谈论另一种方法，那么我建议根本不需要使用javascript。如果您只想更改单选按钮的颜色并检查选中了哪个按钮，也可以使用css进行操作。

那么您不能直接更改本机单选按钮的颜色。但还有另一种方法，如下所述。

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #06c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

<label class="container">One
  <input type="radio" checked="checked" name="a">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="a">
  <span class="checkmark"></span>
</label>

Answer 3

'a'与'a '不同。name属性包含CDATA。它可以或多或少是您喜欢的任何东西。（您不应该在行首或行尾加上white space，因为用户代理可以忽略它，但是中间留有空白是可以的。）what i should use as name attributes

$("input[type='radio']").each(function () {
    if ($(this).is(":checked")) {
    $(this).addClass("some");
   }
 });

  .some {
      background-color:#06c!important;
  }

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

单选按钮未切换

3 个答案: