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');

        }
    });

oops yes your right; i didn't notice that but i fixed it but still no luck — NewB, May 15 '17 at 18:05
Well you have no class for active so it is not magically going to show the item — epascarello, May 15 '17 at 18:07
Well you should show that..... And your ids on the radio buttons should be unique, not the same thing — epascarello, May 15 '17 at 18:10

score 2 · Accepted Answer · answered May 15 '17 at 18:09

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

score 0 · Answer 2 · answered May 15 '17 at 18:08

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

            } else if ($(this).val() == "web") {
                $('#web').addClass('active');
                $('#phone').removeClass('active');

            }
        });

score 0 · Answer 3 · answered May 15 '17 at 18:11

Use the change event on the input. The below works.

$("input[name=phoneOrWeb]").change(function () {
    if (this.value == "phone") {
        $('#web').removeClass('active');
        $('#phone').addClass('active');
    } else if (this.value == "web") {
        $('#web').addClass('active');
        $('#phone').removeClass('active');

    }
});

Fiddle: https://jsfiddle.net/04uhjuvc/

PS: ids should be unique, you have the same id in both the radio buttons.

score 0 · Answer 4 · edited May 23 '17 at 11:47

0

You shoud check this one. How to use radio on change event?

$(document).ready(function() {
    $('input[type=radio][name=bedStatus]').change(function() {
        if (this.value == 'allot') {
            alert("Allot Thai Gayo Bhai");
        }
        else if (this.value == 'transfer') {
            alert("Transfer Thai Gayo");
        }
    });
});

edited May 23 '17 at 11:47

Community

1
1

answered May 15 '17 at 18:13

shaair

945
12
24

score 0 · Answer 5 · edited May 15 '17 at 18:19

0

You can make use of JQuery toggleClass for this to make it more simple:

$("input[name=phoneOrWeb]:radio").click(function () {
        if (this.value == "phone")) {
            $('#phone').toggleClass( "active" );
        } else if (this.value == "web")) {
            $('#web').toggleClass( "active" );    
        }
    });

edited May 15 '17 at 18:19

Akshay Chawla

613
1
8
16

answered May 15 '17 at 18:15

Poku

3,138
10
46
64

score 0 · Answer 6 · answered May 15 '17 at 18:18

0

This depends that the Values of your Radios are equal to the target-element IDs:

$(".radio.toggle").on("click", function() {
    $(".drawer").removeClass("active");
    $("#"+$(this).val()).addClass("active");
});

answered May 15 '17 at 18:18

bernhardsohndesherbert

1

score 0 · Answer 7 · answered May 15 '17 at 18:35

Try this:

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

<div class="drawer" id="phone">phone</div>
<div class="drawer" id="web">web</div>

jQuery script:

<script>
    $(document).ready(function () {
        $('#phone-option').click(function () {
            $('#web').removeClass("active");
            $('#phone').addClass("active");
        });
        $('#web-option').click(function () {
            $('#phone').removeClass("active");
            $('#web').addClass("active");
        });
    });
</script>

jQuery add and remove class based on radio checked value

7 Answers7