ラジオボタンでJCleryでaddClassとremoveClassを選択

Question

2つのラジオボタンがあります。しかし、ラジオボタンは画像として表示されています。私の質問は画像の選択（ラジオボタン）にあり、他の画像を非表示にしたいと思います。ですから、私が考えたのは、チェックしたクラスを追加し、チェックしない別のクラスを追加することです。チェックされていないクラスのベースは、私はそれらを非表示にすることができます。

私の問題は、サイズのラジオボタンと理由のラジオボタンが2セットあるため、それらを区別してほしいからです。サイズを選択すると、ラジオボタンが表示されなくなることはありません。

私はそれらを別々に区別してターゲットにすることができます。

私はこのコード行を追加した場合：

$('label:has(input:radio:checked)').addClass('activeReason'); 

は、それは私が望んでいないすべてのラジオボタンに適用されますが。ここで

は私のラジオボタンです：サイズ

<form id="sign-condition"> 

      <label> 
      <input type="radio" name="sign-condition" class="sign-condition" value="new_sign" /> 
      <img src="../../css/icons/new-signs.png"> 
      </label> 

      <label> 
      <input type="radio" name="sign-condition" class="sign-condition" value="old_sign"/> 
      <img src="../../css/icons/old-signs.png"> 
      </label> 
    </form> 

ここでは私のラジオボタンです：理由

<div class="col-md-6"> 

       <form id="sign-reason"> 

        <label> 
        <input type="radio" name="sign-reason" value="damaged" /> 
        <img src="../../css/buttons/damaged.png"> 
        </label> 

        <label> 
        <input type="radio" name="sign-reason" value="odd-size"/> 
        <img src="../../css/buttons/odd-size.png"> 
        </label> 

        <label> 
        <input type="radio" name="sign-reason" value="not-correct-standard"/> 
        <img src="../../css/buttons/not-correct-standard.png"> 
        </label> 
    </form 

ここで私はそれぞれ異なるセットをターゲットにしようとしたjQueryのです。

<script> 
     $(document).ready(function(){ 

     $('input:radio').click(function() { 
      $('label>.sign-condition:has(input:radio:checked)').addClass('activeCondition'); 
      $('label>.sign-condition:has(input:radio:checked)').removeClass('disable'); 
      $('label>.sign-condition:has(input:radio:not(:checked))').removeClass('activeCondition'); 
      $('label>.sign-condition:has(input:radio:not(:checked))').addClass('disable'); 

     }); 



     }); 
     </script> 

どのように各ラジオボタンの設定を異なる方法で行うことができますか。あなたが知っている最良の方法を使用して配列を横断し、（ネイティブjavascriptやjQueryの）名前でラジオボタンを取得し、それが配列になります、その後、現在クリックされたラジオボタンの名前と値を取得し、あなたに

Answer 1

私はあなたが必要なもの、この場合はわからない：

$(document).ready(function(){ 
 
    $('input:checkbox').change(function() { 
 
     /*get the parent node of the radio and then hide only its siblings*/ 
 
     $(this).parent('label').siblings().toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form id="sign-condition"> 
 

 
      <label> 
 
      <input type="checkbox" name="sign-condition" class="sign-condition" value="new_sign" /> 
 
      <img src="../../css/icons/new-signs.png"> 
 
      </label> 
 

 
      <label> 
 
      <input type="checkbox" name="sign-condition" class="sign-condition" value="old_sign"/> 
 
      <img src="../../css/icons/old-signs.png"> 
 
      </label> 
 
    </form> 
 
    
 
     <form id="sign-reason"> 
 

 
        <label> 
 
        <input type="checkbox" name="sign-reason" value="damaged" /> 
 
        <img src="../../css/buttons/damaged.png"> 
 
        </label> 
 

 
        <label> 
 
        <input type="checkbox" name="sign-reason" value="odd-size"/> 
 
        <img src="../../css/buttons/odd-size.png"> 
 
        </label> 
 

 
        <label> 
 
        <input type="checkbox" name="sign-reason" value="not-correct-standard"/> 
 
        <img src="../../css/buttons/not-correct-standard.png"> 
 
        </label> 
 
    </form>

Answer 2

ありがとうございました値が現在クリックされているラジオボタンと等しくないラジオボタンを非表示にします。

希望します。

Answer 3

下記のJSコードを試してください。それを一時的なコードに置き換えてください。

<script> 
    $(document).ready(function(){ 
     $(#sign-condition input:radio).click(function() { 
      $('label>.sign-condition:has(input:radio:not(:checked))').removeClass('activeCondition').addClass('disable'); 
      $(this).removeClass('disable').addClass('activeCondition'); 
     }); 
    }); 
</script> 

Answer 4

getElementsByNameは、ラジオボタンの名前で配列を返す必要があります。その結果、あなたのロジックを使用してチェックボタンにクラスを追加します。