jQuery add and remove class based on radio checked value

Question

SOLVED - Thank you all for your time

I'm having a little trouble getting this one right. Basically I have two radio buttons with different values and I need to add and remove the class "active" from div's that pertain to the value of the radio button. See my code below:

HTML:

<li class="field">
    <label>choose option:</label>
    <label class="radio toggle" gumby-trigger="#phone" for="phoneOrWeb">
    <input name="phoneOrWeb" id="phoneOrWeb" value="phone" type="radio">
    <span></span> <strong>Phone</strong>
    </label>
    <label class="radio toggle" gumby-trigger="#web" for="phoneOrWeb">
    <input name="phoneOrWeb" id="phoneOrWeb" value="web" type="radio">
    <span></span> <strong>Web</strong>
    </label>
 </li>

    <!-- Phone SUB -->
    <div class="drawer" id="phone">
    <?php include ('formD.php'); ?>
    </div>
    <!-- /Phone SUB -->


    <!-- WEB SUB -->
    <div class="drawer" id="web">
    <?php include ('formE.php'); ?>
    </div>
    <!-- /WEB SUB -->

Jquery I attempted:

$("input[name=phoneOrWeb]:radio").click(function () {
        if ($('input[name=phoneOrWeb]:checked').val() == "phone") {
            $('#web').removeClass('active');
            $('#phone').addClass('active');

        } else if ($('input[name=phoneOrWeb]:checked').val() == "web") {
            $('#web').addClass('active');
            $('#phone').removeClass('active');

        }
    });

Answer 1

Your code is very close. First of all, IDs should always be unique. One element per ID on a page. phoneOrWeb is used twice which is not good. Secondly, if you don't want to do a second jQuery selection, you can just grab the value from the target of the event. This code should work as you expected.

$("input[name=phoneOrWeb]:radio").click(function(ev) {
  if (ev.currentTarget.value == "phone") {
    $('#web').removeClass('active');
    $('#phone').addClass('active');

  } else if (ev.currentTarget.value == "web") {
    $('#web').addClass('active');
    $('#phone').removeClass('active');

  }
});

.drawer {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 4px;
}

.drawer.active {
  border: 3px solid red;
  margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="field">
  <label>choose option:</label>
  <label class="radio toggle" gumby-trigger="#phone" for="phoneInput">
<input name="phoneOrWeb" id="phoneInput" value="phone" type="radio">
<span></span> <strong>Phone</strong>
</label>
  <label class="radio toggle" gumby-trigger="#web" for="webInput">
<input name="phoneOrWeb" id="webInput" value="web" type="radio">
<span></span> <strong>Web</strong>
</label>
</li>

<!-- Phone SUB -->
<div class="drawer" id="phone">
  Phone!
  <!--<?php include ('formD.php'); ?>-->
</div>
<!-- /Phone SUB -->


<!-- WEB SUB -->
<div class="drawer" id="web">
  Web!
  <!--<?php include ('formE.php'); ?>-->
</div>
<!-- /WEB SUB -->