如何控制單選按鈕組？

我有單選按鈕組，我不得不選擇一個它的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

如何控制單選按鈕組？

回答

相關問題