Question

已解决 - 谢谢大家的时间

我很难将这一点弄好。基本上我有两个不同值的单选按钮，我需要添加和删除类＆＃34;活动＆＃34;来自与单选按钮值相关的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');

        }
    });

Answer 1

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

＆＃13;

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

＆＃13;

.drawer {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 4px;
}

.drawer.active {
  border: 3px solid red;
  margin: 1px;
}

＆＃13;

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

＆＃13;

Answer 2

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

            }
        });

Answer 3

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

$scope.notifyCtrl.bcc = ["abc@domain.com","xyz@domain.com"]

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

PS：ids应该是唯一的，你在两个单选按钮中都有相同的ID。

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

Answer 5

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

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

Answer 6

这取决于您的无线电的值等于目标元素ID：

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

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

jQuery根据无线电选中的值

7 个答案: