如何控制单选按钮组？

我有单选按钮组，我不得不选择一个它的okey到目前为止，但在同一时间我想添加类只有一个，如果哪一个必须检查我怎么能做到这一点？我的意思是如果我点击当前的单选按钮，我想为它添加类。如果我点击另一个按钮，它必须删除另一个单选按钮。如何控制单选按钮组？

顺便说一句，我想改变标签默认文本和检查文本的文本。

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

来源

2016-12-17 ani_css

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>

来源

2016-12-17 11:29:02

太棒了！怎么样的文字是任何方式来更改文本，如果按钮被检查文本必须是blabla如果没有选中必须是xxxx我的意思是..有没有任何功能，像这样的addClass工程？ –

检查我的更新，（不确定这是什么意思）。 –

我的标签文本是“选择”，如果我检查单选按钮，如果将“选择”，如果我检查另一个单选按钮，它将默认文本我试过，但我不能它 –

或者你也可以做这样的事情，使用jQuery的 “不” 的功能：

$('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(){ 
 
     \t \t \t \t $('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>

来源

2016-12-17 11:32:20

如何控制单选按钮组？

回答

相关问题