ラジオボタングループを制御する方法は？

私はラジオ・ボタン・グループを持っています。これまでのところオッケーだけを選択する必要がありましたが、同時にクラスを追加したいのですが、どのクラスをチェックする必要がありますか？現在のラジオボタンをクリックすると、そのクラスにクラスを追加します。別のボタンをクリックすると、別のラジオボタンのクラスを削除する必要があります。ラジオボタングループを制御する方法は？

ところで、私はラベルのデフォルトテキストとチェックテキストのテキストを変更したいと思います。

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。

そのあとのようなチェックを1に追加$('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

ラジオボタングループを制御する方法は？

答えて

関連する問題