Question

我尝试根据选中的单选按钮更改可见的文本区域。

我已经按照Google上的各种指南进行操作，但没有一个有效。

这是我目前所拥有的，使用点击功能，但仍然没有。

HTML：

<div class="row col-md-12">
    <!-- Header Delimitation input settings -->
    <div class="form-group col-md-4">
        <label class="control-label" for="header_delimitation">Header delimitation</label>
        <div class="col-md-12">
            <div class="radio">
                <label for="header_delimitation-0">
                <input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
            </div>
                <div class="radio">
                    <label for="header_delimitation-1">
                        <input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
                    Character delimiter
                    </label>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group" id="header_col_form">
                <label class="control-label" for="header_columns_num">Number of Columns</label>
                <div class="">
                    <input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group" id="header_delim_form">
                    <label class=" control-label" for="header_delim">Header delimiter</label>
                    <div class="">
                        <input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
                    </div>
                </div>
           </div>

JS：

$(document).ready(function () {

    $('#header_col_form').hide('fast');
    $('#header_delim_form').hide('fast');

    $('#header_delimitation-0').click(function () {
        $('#header_col_form').show('fast');
        $('#header_delim_form').hide('fast');
    });

    $('#header_delimitation-1').click(function () {
        $('#header_delim_form').show('fast');
        $('#header_col_form').hide('fast');
    });
});

How it looks like now

因此功能明智，它应该在选择header_delimitation_0时显示header_col_form并隐藏header_delim_form。然后，我将在选择header_delimitation_1时添加反向。

完成此任务的方式很可能更简单，更简洁，如果是这样，我们将非常感谢任何帮助。

使用单选按钮显示隐藏文本区域

0 个答案: