javascript - 如何控制单选按钮组？

Question

我有单选按钮组，我必须只选择一个，到目前为止没问题，但同时我只想添加一个类，如果必须检查哪一个，我该怎么做？我的意思是，如果我单击当前单选按钮，我想为其添加类。如果我单击另一个按钮，它必须删除另一个单选按钮类。

顺便说一句，我想更改标签默认文本和选中文本的文本。

HTML :

 <label>       
   <span>CHOOSE</span><input type="radio" name="group1">
 </label>

 <label>       
   <span>CHOOSE</span><input type="radio" name="group1">
 </label>

JS :

$('input:radio').on("click",function(){
    if ($(this).is(':checked')) {
        $(this).parents("label").addClass("arac-secildi");
        $(this).parents("label").find("span").text("CHOOSED");
    }
});

CodePen example

Answer 1

Updated CodePen .

您可以使用 $('label').removeClass("arac-secildi") 从所有其他标签中删除该类，然后将其添加到选中的标签中，例如:

$('input:radio').on("click",function(){
  $('label').removeClass("arac-secildi");
  $('span').text("CHOOSE");

  if ($(this).is(':checked')) {
    $(this).parents("label").addClass("arac-secildi");
    $(this).parents("label").find("span").text("CHOOSED");
  }
});

希望这对您有所帮助。

$('input:radio').on("click",function(){
  $('label').removeClass("arac-secildi");
  $('span').text("CHOOSE");
  
  if ($(this).is(':checked')) {
    $(this).parents("label").addClass("arac-secildi");
    $(this).parents("label").find("span").text("CHOOSED");
  }
});

.arac-secildi{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>       
  <span>CHOOSE</span><input type="radio" name="group1">
</label>
<label>       
  <span>CHOOSE</span><input type="radio" name="group1">
</label>
<label>       
  <span>CHOOSE</span><input type="radio" name="group1">
</label>