Javascript 根据选中的单选按钮在页面上的元素上添加和删除活动类

我有3个单选按钮，我希望每个选中的函数将一个活动类应用于页面上的某个元素，该元素将控制“活动”的内容

我已经设法让活动类在一个单选按钮上工作，但是我在取消选中该类并高效地为其他两个单选按钮编写代码时遇到了问题，因为我的JS知识是基本的

以下是我对一个工作阶级的看法：

$("input#Beach").click(function () {
     if ($(this).is(":checked")) {
         $("#formBeach").addClass("active");
     }
});

那么，在取消选中该类时，如何删除该类呢？并包括其他两台收音机来做同样的事情

更新：这是电台的html

<ul class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday">
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday">
        <label for="Beach">Beach</label>
   </li>
</ul>

选择您的假期：

游览


巡航


海滩

---

只是澄清一下，每个单选控件控制一个窗体，一次只能有一个窗体处于“活动”状态，因此我需要“未选中”单选按钮从其目标元素中删除活动类

在您的特定情况下，甚至不需要检查

checked

属性

$（'.form group>li'）。查找（'input'）。更改（函数（）{
$（'.form group>li'）。查找（'label'）。添加类（'hidden'）；
如果（$（this）.is（“：checked”））{
$（this.parent（）.find（'label'）.toggleClass（'hidden'）；
}
});
#formBeach{
高度：50px；
宽度：50px；
背景：蓝色；
显示：无；
}
.主动{
显示：块！重要；
}
.隐藏{
显示：无；
}
$（'.form group>li'）。查找（'input'）是（“：checked”）{


选择您的假期：

游览


巡航


海滩

在您的特定情况下，甚至不需要检查
checked
属性


$（'.form group>li'）。查找（'input'）。更改（函数（）{
$（'.form group>li'）。查找（'label'）。添加类（'hidden'）；
如果（$（this）.is（“：checked”））{
$（this.parent（）.find（'label'）.toggleClass（'hidden'）；
}
})；
#formBeach{
高度：50px；
宽度：50px；
背景：蓝色；
显示：无；
}
.主动{
显示：块！重要；
}
.隐藏{
显示：无；
}
$（'.form group>li'）。查找（'input'）是（“：checked”）{


选择您的假期：

游览


巡航


海滩

这就是你要尝试的。@louis


$（文档）.ready（函数（）{
$（“输入性别”）。单击（函数（）{
$（'.genderspan'）.removeClass（'active'）；
var activespan=$（this.attr（'data-gender'）；
$（'.+activespan）.addClass（'active'）；
});
})；
.genderspan.active{color:#0C3；}

男性

女性

其他


男性

女性

其他的
是你在尝试的。@louis


$（文档）.ready（函数（）{
$（“输入性别”）。单击（函数（）{
$（'.genderspan'）.removeClass（'active'）；
var activespan=$（this.attr（'data-gender'）；
$（'.+activespan）.addClass（'active'）；
});
})；
.genderspan.active{color:#0C3；}

男性

女性

其他


男性

女性

其他
请在输入单选按钮中添加一个常见的
类
，并在该类单击时创建事件。我在您的输入单选按钮中添加了一些额外的
参数
，以匹配表单的
id

请保持表单和数据表单单选按钮的
id
值不变

请查找您的更新代码：

<ul class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" class="check" data-form="form1" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday" class="check" data-form="form2" />
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday" class="check" data-form="form3" />
        <label for="Beach">Beach</label>
   </li>
</ul>

<form name="form1" id="form1" class="form active">
1
</form>
<form name="form2" id="form2"  class="form">
2
</form>
<form name="form3" id="form3"  class="form">
3
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".check").click(function () {
    $(".form").removeClass("active");
     if ($(this).is(":checked")) {
        var form = $(this).data('form');
        //alert(form);
        $('#'+form).addClass("active");
     }
});
</script>


选择您的假期：

游览


巡航


海滩


1.
2.
3.
$（“.check”）。单击（函数（）{
$（“.form”）.removeClass（“活动”）；
如果（$（this）.is（“：checked”））{
var form=$（this.data（'form'）；
//警报（表格）；
$（'#'+form）.addClass（“活动”）；
}
});

请根据您的要求删除额外代码。
只需复制并替换代码即可

希望，它可能对您有用。
请在输入单选按钮中添加一个常见的
类
，并在该类单击时创建事件。我在您的输入单选按钮中添加了一些额外的
参数
，以匹配表单的
id

请保持表单和数据表单单选按钮的
id
值不变

请查找您的更新代码：

<ul class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" class="check" data-form="form1" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday" class="check" data-form="form2" />
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday" class="check" data-form="form3" />
        <label for="Beach">Beach</label>
   </li>
</ul>

<form name="form1" id="form1" class="form active">
1
</form>
<form name="form2" id="form2"  class="form">
2
</form>
<form name="form3" id="form3"  class="form">
3
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".check").click(function () {
    $(".form").removeClass("active");
     if ($(this).is(":checked")) {
        var form = $(this).data('form');
        //alert(form);
        $('#'+form).addClass("active");
     }
});
</script>


选择您的假期：

游览


巡航


海滩


1.
2.
3.
$（“.check”）。单击（函数（）{
$（“.form”）.removeClass（“活动”）；
如果（$（this）.is（“：checked”））{
var form=$（this.data（'form'）；
//警报（表格）；
$（'#'+form）.addClass（“活动”）；
}
});

请根据您的要求删除额外代码。
只需复制并替换代码即可

希望，它可能对您有用。
为您的ul元素添加一个id

 <ul id="holidays" class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday">
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday">
        <label for="Beach">Beach</label>
   </li>
</ul>

希望有帮助。
为ul元素添加一个id

 <ul id="holidays" class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday">
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday">
        <label for="Beach">Beach</label>
   </li>
</ul>

希望对您有所帮助。
toggleClass and change Event就我理解您的问题而言，我已经发布了一个答案，如果您有任何疑问，请查看并让我知道。我希望，它可以解决您的问题。toggleClass and change Event就我理解您的问题而言，我已经发布了一个答案，如果您有任何疑问，请查看并让我知道。我希望，它是我可以解决你的问题。我会沿着这条路线走，但就像我说的，我有3个单选按钮控制不同的表单。所以我需要一次显示一个表单，这就是单选按钮的用途；如果不选中它们，它将删除类。@LouisAnderson啊，单选按钮。我的错误。你能提供更多的html吗？表单。表单可以是n艾默德，不管是什么，相对于