javascript - 使用 HTML 和 Javascript 使用 4 个单选按钮显示和隐藏输入字段

Question

我是 Javascript 的初学者。

我有 4 个单选按钮:

1. 房子
2. 公寓/公寓
3. 平房
4. 商业

和 2 个输入字段:

1. 房间:
2. 卧室:

单击房屋、公寓、平房时，我想隐藏房间并显示输入字段卧室 单击广告时我想隐藏卧室并显示房间。

请参阅下面的代码:

HTML 代码:

<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <label>Type of Property:</label>
            <br/>
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
            <input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
    </tr>
    <tr class="showCta">
        <td colspan="3">
            <label>Rooms:</label>
            <input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
        </td>
    </tr>
    <tr class="showTr">
        <td colspan="3">
            <label>Bedrooms:</label>
            <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
        </td>
    </tr>
</table>

JAVASCRIPT:

$(window).load(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
});

$(window).load(function () {
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

Answer 1

JS 应该类似于

function update (el) {
    var $rooms = $('tr.showCta');
    var $bedrooms = $('tr.showTr');

    if (el.checked && el.value === 'bedrooms') {
        $rooms.hide();
        $bedrooms.show();
    } else {
        $rooms.show();
        $bedrooms.hide();
    }
}

$(function () {
    //get initial state.
    update($('input:checked')[0]);
    $('input[name="fromType"]').change(function () {
        update(this);
    });
});

jsFiddle http://jsfiddle.net/bj4Lx7ms/