addClass and removeClass in Jquery on radio button select

Question

I have 2 different sets of radio buttons. But radio buttons are being displayed as an images. My question is on the select of picture (radio button), I would like other pictures to become hidden. So the way I thought is to add class to checked and than add another class to not checked. Base on the class on the not checked, i can hide those.

My problem is because I have 2 sets of radio buttons one for size and one for reason, I want them to differentiate them.So when I select size, I don't want all reasons radio buttons to become hidden.

So I can differentiate them separately and target them.

If I add this line of code:

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

It apply to all radio buttons which I don't want.

Here is my radio buttons: Size

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

Here is my radio buttons: Reasons

    <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

Here is JQuery which I tried to target each set differently.

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

How I can target each set of radio buttons differently. Thank you

Answer 1

I am not sure if this what you need:

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