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");
  }
});

希望这有帮助。

＆＃13;

$('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");
  }
});

＆＃13;

.arac-secildi{
  background:red;
}

＆＃13;

<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>

＆＃13;

Answer 2

或者你可以使用jquery的“not”函数做这样的事情：

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

这是一个jsfiddle https://jsfiddle.net/dv0Lnohu/3/

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

.arac-secildi{
  background:red;
}

<body>
  
 <label>       
   <span>CHOOSE</span><input type="radio" name="group1">
 </label>
  
  
 <label>       
   <span>CHOOSE</span><input type="radio" name="group1">
 </label>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>

如何控制单选按钮组？

2 个答案: