Javascript 选中收音机后显示复选框列表和文本字段

我有一个包含以下字段的表单：

<div>
     <input name="department" type="radio" value="1" required >
     <label for="Orchestra">Orchestra</label>
</div>
<div>
      <input name="department" type="radio" value="2">
     <label for="Band">Band</label>
</div>

管弦乐队
乐队

我想能够做的是，仅当选中“Band”单选按钮时，才显示不同的复选框和注释文本字段。如果未选中此选项，则复选框应消失。我在网上找到了几个例子，但由于某些原因，我无法让它们发挥作用。问题一定是我不懂Javascript或JQuery:（如有任何帮助，将不胜感激

---

我尝试了在stackOverflow和其他网站上看到的不同的东西，但我对Javascript一无所知，所以无法让它工作。

我创建了一个有注释的提琴来帮助您完成您的要求，但也为您提供了实际情况的线索。我建议您使用大量资源深入研究Javascript/JQuery现在，我希望我的评论能帮助你开始

这里的主要要点是，我们使用JavaScript来“监听”所讨论的输入是否被选中，而不是基于该值被选中，我们可以指定在这种情况下视图的外观，隐藏或显示元素

JS 加成

管弦乐队
乐队
波段已选定

---

Demo Fiddle：那么你尝试了什么？问题一定是我不懂Javascript或JQuery-我钦佩你的诚实。你应该从学习它开始，然后你会发现，如果这是Javascript，你可以显示呈现的HTML，而不是PHP。我在掌握完PHP之后才学习Javascript；我认为不懂Javascript事情将变得非常困难。@David Thomas，我删除了PHP代码，只留下了html。感谢您花时间来回顾这一点。@komodo--在您“掌握”web开发的同时，我不会忽略web开发的其他关键方面另一个-如果你在做全栈开发-你需要知道JavaScript非常感谢你这么详细的解释。JavaScript看起来很难理解。尽管你的解释很好，但我还是无法让它工作。我想知道这是否是由于与我网站上的其他类型代码冲突或其他原因。我想我需要学习你给我的代码，我会在我弄明白后几天回来。非常感谢！

$(function () {

    // Create selectors for relevant DOM elements
    var $Department = $('input[name="department"]');
    var $BandSelected = $('#BandSelected');

    // Create a function that you pass 
    // the value of the input element in question.
    // Return TRUE/FALSE based on equality to 2, 
    // the `value` associated with the 'Band' input 
    function isBandsSelected(val) {
        return val == 2;
    }

    // Attach an event listener on `click' of inputs
    $Department.click(function () {
        // Assign a variable to the function that determines if the input
        // we click on is 'Band' (has a value of 2)
        var showBand = isBandsSelected($(this).val());

        // If `showBand` returns TRUE, show our `BandSelected` div
        if (showBand) {
            $BandSelected.show();
            // If `showBand` returns FALSE, show our `BandSelected` div
        } else {
            $BandSelected.hide();
        }
    });

});

<div>
    <input name="department" type="radio" value="1" required>
    <label for="Orchestra">Orchestra</label>
</div>

<div>
    <input name="department" type="radio" value="2">
    <label for="Band">Band</label>
</div>

<div id="BandSelected" class="hidden">
    Band is selected
</div>