Javascript 样式单选按钮（CSS/jQuery）

我有这个：

。。。不能作为JS代码段单独工作。为什么?

---

如果您有任何见解，我将不胜感激。谢谢。

首先，将预标记更改为脚本标记

与其使用if语句来添加和删除类，不如直接使用

toggleClass（）

---

首先，将pre标记更改为script标记

与其使用if语句来添加和删除类，不如直接使用

toggleClass（）

---

我将尝试回答这个问题，因为每个人都关注您正在使用的

$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

我这样做而不是使用.toggleClass（）的原因是，如果您有两个以上的单选按钮，这实际上会起作用。
我将尝试回答这个问题，因为每个人都关注您使用的是

$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

我这样做而不是使用.toggleClass（）的原因是，如果您有两个以上的单选按钮，这实际上会起作用。
您不需要if语句，请尝试以下操作：

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});

另外，您说过“当单击另一个单选按钮时，备用单选按钮不会取消选择。”

将name属性添加到输入中，即：
name=“Group1”
如果不需要if语句，请尝试以下操作：

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});

另外，您说过“当单击另一个单选按钮时，备用单选按钮不会取消选择。”

在输入中添加name属性，即：
name=“Group1”
好的，这里有几点

首先，组中的单选按钮需要具有相同的名称。例如：

不需要if语句。希望有帮助。
好的，这里有几件事

首先，组中的单选按钮需要具有相同的名称。例如：

不需要if语句。希望有帮助。
你知道的
！=<代码>
，对吗？您不需要在标记中运行任何东西，只需要使用类似于格式化的代码将其打印出来。编辑：这看起来实际上只是应用于代码的某种奇怪的格式化JSFIDLE。将检查您的js。您知道
！=<代码>

，对吗？您不需要在标记中运行任何东西，只需要使用类似于格式化的代码将其打印出来。编辑：这看起来实际上只是应用于代码的某种奇怪的格式化JSFIDLE。我会检查你的js。是的，我使用标签是因为我认为你需要它们来在stackoverflow中发布代码。无论如何，我会花一些时间来看看这些答案。。。谢谢大家的快速回复@最后一行中的天顶更改此

）}用于
}）
，你可以使用
$（'：radio'）
而不是
'input[type=“radio”].
更新：这些答案只能让我半途而废，因为我想让未选中的单选按钮在选中另一个单选按钮后立即失去“活动”类，而不是在第二次单击单选按钮时。嘿，是的，我使用标记是因为我认为您需要它们在stackoverflow中发布代码。无论如何，我会花一些时间来看看这些答案。。。谢谢大家的快速回复@最后一行中的天顶更改此
）}用于
}）
，您可以使用
$（'：radio'）
而不是
'input[type=“radio”]'
更新：这些答案只能让我半途而废，因为我想让未选中的单选按钮在另一个单选按钮被选中时立即失去“活动”类，而不是在第二次单击单选按钮时。谢谢——虽然这只能让我半途而废，因为我想让所有其他单选按钮在另一个单选按钮被取消选中后立即取消高亮显示，第二次单击单选按钮时不会。我在这里试过你的方法：（顺便说一句，}）；您可以使用
$（':radio'）
而不是
'input[type=“radio”]
谢谢--虽然这只让我半途而废，因为我希望在取消选择另一个单选按钮时，而不是在第二次单击单选按钮时，所有其他单选按钮都取消高亮显示。我在这里试过你的方法：（顺便说一句，}）；您可以使用
$（':radio'）
而不是
'input[type=“radio”]
您的答案有意义！不幸的是，我在jsfiddle here（）上尝试了它，但它不起作用。：/有人看到错误可能在哪里吗？将其封装在.on（）事件中，而不是将其作为if语句。为了反映这一点，我更新了我的答案和你的JSFIDLE。我还将其简化为使用
.parent（）
而不是
.nestest（'label'）
，因为这就是所需的全部内容。您的答案很有意义！不幸的是，我在jsfiddle here（）上尝试了它，但它不起作用。：/有人看到错误可能在哪里吗？将其封装在.on（）事件中，而不是将其作为if语句。为了反映这一点，我更新了我的答案和你的JSFIDLE。我还将其简化为使用
.parent（）
而不是
.closest（'label'）
，因为这就是所需的全部内容。谢谢。这是有道理的，尽管我尝试了你的解决方案，但无法使其发挥作用/@LNA我已经更新了我的答案，我不是要你删除文档准备并点击函数，只是If语句。同样在JSFIDLE中，您的输入有不同的名称属性，它们必须是相同的。W00t！现在工作。谢谢我有几只虫子，谢谢。这是有道理的，尽管我尝试了你的解决方案，但无法使其发挥作用/@LNA我已经更新了我的答案，我不是要你删除文档准备并点击函数，只是If语句。同样在JSFIDLE中，您的输入有不同的名称属性，它们必须是相同的。W00t！现在工作。谢谢我有几只虫子。
$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});