javascript - jQuery add and remove class based on radio checked value - Stack Overflow

admin管理员组

文章数量:1404466

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

        }
    });

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

        }
    });

• javascript
• jquery
• html

Share Improve this question Follow edited May 15, 2017 at 18:15 NewB asked May 15, 2017 at 17:59 NewBNewB 12533 silver badges1313 bronze badges 5

• oops yes your right; i didn't notice that but i fixed it but still no luck – NewB Commented May 15, 2017 at 18:05
• Well you have no class for active so it is not magically going to show the item – epascarello Commented May 15, 2017 at 18:07
• Unless you have a css file or <style> or inner style='' with certain attributes for .active adding/removing that class will do nothing, try show() / hide() – Lixus Commented May 15, 2017 at 18:08
• I do have css attributes for .active – NewB Commented May 15, 2017 at 18:10
• Well you should show that..... And your ids on the radio buttons should be unique, not the same thing – epascarello Commented May 15, 2017 at 18:10

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

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

$("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');

            }
        });

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/04uhjuvc/

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

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");
        }
    });
});

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");
});

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" );    
        }
    });

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>

本文标签： javascriptjQuery add and remove class based on radio checked valueStack Overflow