选中无线电后显示复选框和文本字段列表

Question

我的表单包含以下字段：

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

我希望能够做的只是显示不同的复选框和评论文本字段，如果＆＃34; Band＆＃34;的单选按钮检查。如果未选中此选项，则复选框应该消失。我在网上找到了几个例子，但出于某种原因，我无法让它们发挥作用。问题必须是我不知道Javascript或JQuery :(任何帮助将不胜感激。

我尝试过在stackOverflow和其他网站上看到的不同内容，但我对Javascript一无所知，我无法让它发挥作用。

Answer 1

我已经创建了一个评论小提琴，可以帮助您完成您的要求，同时也可以了解实际情况。我推荐使用在线提供的许多资源深入研究JavaScript / JQuery，但是现在，我希望我的评论能帮助您入门。

这里的主要内容是，我们使用JavaScript来“监听”有问题的输入是否被选中，而不是基于该值选择，我们可以指示我们的视图将是什么样子 - 在这种情况下，隐藏或显示元素。

JS

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

演示小提琴：http://jsfiddle.net/4x1ybqyv/