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

Show and hide input fields using 4 radio buttons using HTML and Javascript

本文关键字：使用字段隐藏输入显示 4个 HTML Javascript 单选按钮更新时间：2024-04-26

我完全是Javascript的初学者。

我有4个单选按钮：

House
公寓/公寓
平房
商业

和2个输入字段：

房间：
卧室：

点击House，Flat，Bungalow，I want to hide Rooms and show the input field Bedrooms点击commercial I want hide Bedrooms。

请参阅下面的代码：

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();
    });
});

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);
    });
});

jsFiddlehttp://jsfiddle.net/bj4Lx7ms/

JAVASCRIPT:

$( document ).ready(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

文件加载并设置onclick handler 后

我认为你应该设置

<tr class="showCta">

至

<tr class="showCta" style="display:none;">

在您的案例中，用户从jquery更改。将事件处理程序绑定到"更改"JavaScript事件，或在元素（单选按钮）上触发该事件。使用$(this).val()，您可以从值属性中获取值，以检查卧室的值。然后调用方法show或hide，如本例所示：

$(document).ready(function () {
    $('input:radio[name="fromType"]').change(function(){
        if($(this).val() == 'bedrooms'){
           $('.showCta').hide();
           $('.showTr').show();
        }else if ($(this).val() == 'rooms'){
            $('.showCta').show();
            $('.showTr').hide();
        }
    });
});

并使用将showCta tr隐藏为默认值

<tr class="showCta" style="display:none">

这里是我的JsFiddle示例

$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
    function hideRooms() {
      $("#rooms").hide(0);
      $("#bedrooms").fadeIn(250);
    }
  
    function hideBedrooms() {
      $("#bedrooms").hide(0);
      $("#rooms").fadeIn(250);
    }
  
    $("#label").text("House selected");
  
    hideRooms(); /* Hidding at start of website */
  
    $("#showBedrooms_house").change(function() {      
      $("#label").text("House selected");
      if (this.checked) {
        hideRooms();        
      }
    });
  
    $("#showBedrooms_flatAppart").change(function() {
      $("#label").text("Flat / Appartment selecrted");
      if (this.checked) {
        hideRooms();
      }
    });
  
    $("#showBedrooms_bungalow").change(function() {
      $("#label").text("Bungalow selected");
      if (this.checked) {
        hideRooms();
      }
    });
  
    $("#showRooms_commercial").change(function() {
      $("#label").text("Commercial selected");
      if (this.checked) {
        hideBedrooms();
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <label>Type of Property:</label>
            <br/>
            <input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
            <input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
            <input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
            <input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
    </tr>
    <tr class="showCta" id = "rooms">
        <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" id = "bedrooms">
        <td colspan="3">
            <label>Bedrooms:</label>
            <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
        </td>
    </tr>
    <tr>
        <td style ="color : blue">
          <label id ="label"></label>
        </td>
    </tr>
</table>