jQuery基于单选检查值添加和删除类答案

【问题标题】：jQuery add and remove class based on radio checked valuejQuery基于单选检查值添加和删除类
【发布时间】：2017-10-14 14:54:35
【问题描述】：

已解决 - 感谢大家的宝贵时间

我在正确处理这个问题时遇到了一些麻烦。基本上我有两个具有不同值的单选按钮，我需要从与单选按钮的值相关的 div 中添加和删除“活动”类。请参阅下面的代码：

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：

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

        }
    });

【问题讨论】：

哎呀，你的权利；我没有注意到，但我修复了它，但仍然没有运气
好吧，你没有活动课程，所以它不会神奇地显示项目
除非你有一个 css 文件或 <style> 或内部 style='' 具有某些属性 .active 添加/删除该类将无济于事，请尝试 show() / hide()
我确实有 .active 的 css 属性
嗯，你应该表明......而且你在单选按钮上的 id 应该是唯一的，而不是一回事

标签： javascript jquery html

【解决方案1】：

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

            }
        });

【讨论】：

【解决方案2】：

您的代码非常接近。首先，ID 应该始终是唯一的。页面上每个 ID 一个元素。 phoneOrWeb 被使用了两次，这不好。其次，如果您不想进行第二次 jQuery 选择，您可以从事件的目标中获取值。此代码应该可以按您的预期工作。

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

【讨论】：

【解决方案3】：

在输入上使用更改事件。下面的作品。

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

    }
});

小提琴：https://jsfiddle.net/04uhjuvc/

PS：id 应该是唯一的，两个单选按钮中的 id 相同。

【讨论】：

【解决方案4】：

你应该检查这个。 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");
        }
    });
});

【讨论】：

【解决方案5】：

您可以为此使用 JQuery toggleClass 使其更简单：

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

【讨论】：

【解决方案6】：

这取决于您的 Radios 的 Values 是否等于目标元素 ID：

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

【讨论】：

【解决方案7】：

试试这个：

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

【讨论】：